Maison > Article > programmation quotidienne > Comment implémenter un style de bouton simple en utilisant HTML
Comment implémenter un style de bouton simple en utilisant HTML
- 藏色散人original
- 2018-11-10 16:31:5028663parcourir
Cet article présente principalement comment utiliser le HTML pour implémenter un style de bouton simple.
Dans le processus de conception Web, la configuration des boutons peut être considérée comme la compétence de connaissance HTML/CSS la plus courante et de base.
Tutoriel vidéo de référence recommandé : "Tutoriel HTML"
Ce qui suit est un exemple de code pour présenter aux amis novices comment utiliser HTML pour implémenter un bouton simple style.
style de bouton bouton L'exemple de code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>button按钮样式</title>
<style>
.button1 {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 16px 32px;
text-align: center;
background-color: white;
color: black;
border: 2px solid #4CAF50;
border-radius:5px;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<button class="button1">Green</button>
</body>
</html>L'effet est le suivant :
Introduction aux attributs associés :
transition-duration L'attribut spécifie le temps nécessaire pour terminer l'effet de transition. L'attribut -transition-duration est destiné à la compatibilité du navigateur Safari. L'attribut
text-align spécifie l'alignement horizontal du texte dans l'élément. La valeur de center signifie que le texte est centré horizontalement. L'attribut
border-radius permet d'ajouter une bordure arrondie à un élément.
:hover Le sélecteur est utilisé pour sélectionner l'élément sur lequel le pointeur de la souris flotte. En termes simples, il définit un nouveau style lorsque la souris se déplace vers l'élément spécifié.
Présentation des balises associées :
Ici, nous utilisons la balise
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!