Maison > Article > interface Web > Comment définir l'ombre du bouton en CSS
Comment définir l'ombre d'un bouton avec CSS : créez d'abord un exemple de fichier HTML ; puis définissez un bouton de bouton ; enfin, ajoutez des attributs tels que "box-shadow" au bouton pour obtenir l'effet d'ombre.
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3
Css3 pour créer un bouton avec ombre
Comparaison de l'effet avant et après le passage de la souris :
<!--html代码--> <input class="but" type = "button" value = "确认" />
<!--css代码--> <style type="text/css"> .but{ border: 0px groove orange; box-shadow: 5px 6px 10px #000; margin-left: 160px; border-radius: 10px; background: #034c92; color: white; width: 250px; height: 40px; font-size: 20px; } .but:hover{ box-shadow: 8px 10px 10px #000; background: #005DF9; } </style>
[Apprentissage recommandé : tutoriel vidéo CSS ]
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!