Maison >interface Web >tutoriel CSS >CSS réalise l'effet du bouton dégradé (exemple de code)

CSS réalise l'effet du bouton dégradé (exemple de code)

不言original: 2018-11-09 17:25:0818731parcourir

Cet article partagera avec vous l'effet de la création d'un bouton de couleur dégradée. Le contenu est très détaillé. Les amis intéressés peuvent jeter un œil au contenu spécifique.

Sans plus tard, allons droit au but~

Le code du bouton dégradé est le suivant :

bouton-dégradé. css (fichier css)

.gradientButton{
  border:1px solid #ff6a00;  
  width:100px;  height:28px;  
  background:linear-gradient(to bottom, #fcffa2,#fbb700);/*设置按钮为渐变颜色*/
}

button-gradient.html (fichier html)

<!DOCTYPE html>
<html xmlns=" 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="button-gradient.css" />
  </head>
  <body>
  <div><button type="submit" class="gradientButton">Button</button></div>
  <hr />
  </body>
  </html>

L'effet du bouton dégradé est le suivant :

CSS réalise leffet du bouton dégradé (exemple de code)

Bouton dégradé avec icône

Ce code affiche une icône sur le bouton dégradé.

Le code est le suivant :

image-button-gradient.css (fichier css)

#buttonImage {
  background-image:url(&#39;/img/search.png&#39;);  
  display:inline-block;  
  margin-top:2px;  
  width:16px;  
  height:16px;
}
.flatbutton{
  border:1px solid #3079ed;  
  width:100px;  
  height:28px;  
  background:linear-gradient(to bottom, #9bcfff,#4683ea); 
}

image-button-gradient.html (fichier HTML)

<!DOCTYPE html>
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="image-button-gradient.css" />
  </head>
  <body>
  <button class="flatbutton"><span id="buttonImage"></span></button>
  </body>
  </html>

Description : C'est presque le même que le bouton dégradé du titre de chaîne précédent. Pour afficher des images, les balises span sont décrites dans les balises bouton.

L'effet est le suivant :

CSS réalise leffet du bouton dégradé (exemple de code)

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：Introduction à la méthode de définition de l'espacement des lignes de texte en CSS (exemple de code)Article suivant：Introduction à la méthode de définition de l'espacement des lignes de texte en CSS (exemple de code)

Articles Liés

Voir plus