Maison > Article > interface Web > Code HTML et CSS pour implémenter du texte brut et des boutons avec des icônes

Code HTML et CSS pour implémenter du texte brut et des boutons avec des icônes

不言original: 2018-06-09 16:01:582505parcourir

Cet article présente principalement comment implémenter des boutons de texte brut et d'icônes avec Html et CSS. Les boutons ont de nombreuses apparences. Cet article présente deux types de boutons, le texte pur et les icônes.

Cet article résume les méthodes d'implémentation de certains éléments de base de la page et sera mis à jour à l'avenir. Tout d’abord, la chose la plus courante que nous rencontrons est la découpe des boutons. Les boutons peuvent avoir de nombreuses apparences, mais ils peuvent généralement être divisés en boutons en texte brut et en boutons avec icônes. Parlons des méthodes d’implémentation de ces deux boutons. Le rendu est le suivant :

Le code est le suivant :

XML/HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>按钮写法</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <link rel="stylesheet" href="css/style.css">
<style type="text/css">
  a:hover{text-decoration: none;}     
  .btn{     
    display: inline-block;     
    margin-top: 10px;     
    padding: 10px 24px;     
    border-radius: 4px;     
    background-color: #63b7ff;     
    color: #fff;     
    cursor: pointer;     
  }     
  .btn:hover{     
    background-color: #99c6ff;     
  }     
  .inbtn{     
    border: none;     
  }     
  .bubtn{     
    border: none;     
  }     
  .btn{     
    font-style: normal;     
  }     
  .bgbtn span{     
    margin-left: 10px;     
    padding-left: 20px;     
    background: url(images/edit.png) left center no-repeat;     
  }     
  .bgbtn02 img{     
    margin-bottom: -3px;     
    margin-right: 10px;     
  }     
</style>
</head>
<body>
<!--<a>标签按钮-->
<a href="" class="btn">a标签按钮</a>
<!--<input>标签按钮-->
<input class="inbtn btn" type="button" value="input标签按钮"/>
<!--<button>标签按钮-->
<button class="bubtn btn">button标签按钮</button>
<!--任意标签按钮-->
<i class="ibtn btn">i标签按钮</i>
<!--带背景图标按钮-->
<a href="" class="bgbtn btn">
  <span>带图标按钮</span>
</a>
<a href="" class="bgbtn02 btn">
  <img src="images/edit.png"/>带图标按钮     
</a>
</body>
</html>

Quant aux différentes balises, leurs avantages et inconvénients doivent encore être compris par tout le monde. Si vous avez des boutons intéressants à rédiger, nous les implémenterons ensemble.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser HTML5 pour réaliser la fonction de partage avec les amis WeChat, les amis QQ, le code QR Weibo de l'espace QQ

Conseils pour définir les bordures des tableaux HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser le dégradé linéaire CSS3 pour créer une bordureArticle suivant：Comment utiliser le dégradé linéaire CSS3 pour créer une bordure

Articles Liés

Voir plus