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
Introduction à la signification des fenêtres de téléchargement cloud
nvidia geforce 940mx
Que faire si le système d'installation ne trouve pas le disque dur
Comment modifier le texte sur l'image
description de la page de référencement
La différence entre la charge rapide PD et la charge rapide générale
Le trading de Bitcoin est-il autorisé en Chine ?
numéro de série d'installation pscs5
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
