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
Comment configurer au mieux la mémoire virtuelle
Que se passe-t-il lorsque phpmyadmin ne peut pas y accéder ?
ps quitter la touche de raccourci plein écran
fonction de la touche prtscr
Comment télécharger du HTML
Quelle monnaie est l'u-coin ?
Quels sont les modèles de conception utilisés par Laravel ?
Comment utiliser la fonction abdominaux
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
