Bouton de CSS
Cette section, nous présentons l'utilisation de CSS pour créer le bouton.
Style Bouton Basic
CSS Exemples
background-color: # 4CAF50; / * * Vert /
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Essayez »
Couleur du bouton
Nous pouvons utiliser le background-color propriété pour définir la couleur du bouton:
CSS Exemples
.button2 {background-color: # 008CBA;} / * Blue * /
.button3 {background-color: # f44336;} / * Rouge * /
.button4 {background-color: # e7e7e7; color: black;} / * * gris /
.button5 {background-color: # 555555;} / * * Noir /
Essayez »
Bouton Taille
Nous pouvons utiliser la font-size de font-size de propriété pour définir la taille du bouton:
CSS Exemples
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Essayez »
bouton arrondi
Nous pouvons utiliser le border-radius propriété pour définir le bouton de filet:
CSS Exemples
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Essayez »
couleur Bouton frontière
Nous pouvons utiliser la border propriété d'une couleur bouton frontière:
CSS Exemples
background-color: white;
color: black;
border: 2px solid # 4CAF50; / * * Vert /
}
...
Essayez »
Bouton Hover
Nous pouvons utiliser le :hover sélecteur pour modifier le style en survolant le bouton.
Astuce: Nous pouvons utiliser la transition-duration propriété définie à "planer" vitesse de l' effet:
CSS Exemples
-webkit transition durée: 0,4s; / * Safari * /
transition durée: 0,4s;
}
.button: hover {
background-color: # 4CAF50; / * * Vert /
color: white;
}
...
Essayez »
Bouton ombre
Nous pouvons utiliser le box-shadow propriété pour ajouter une ombre sur le bouton:
CSS Exemples
box-shadow: 0 8px 16px 0 rgba (0,0,0,0.2), 0 6px 20px 0 rgba (0,0,0,0.19);
}
.button2: hover {
box-shadow: 0 12px 16px 0 rgba (0,0,0,0.24), 0 17px 50px 0 rgba (0,0,0,0.19);
}
Essayez »
bouton Désactiver
Nous pouvons utiliser l' opacity propriété pour ajouter de la transparence (ressemble à "désactivé" effets d' attribut) pour le bouton.
Astuce: Que puis - je ajouter cursor propriété et réglé sur "non autorisé" à mettre en place une image handicapés:
Bouton Largeur
Par défaut, la taille du texte du bouton sur le bouton a décidé (basé sur le texte de longueur correspondant). Nous pouvons utiliser la width propriété pour définir la largeur du bouton:
Astuce: Si vous souhaitez définir une largeur fixe peut utiliser des pixels (px) comme une unité, si vous souhaitez définir des boutons sensibles peuvent être définis comme un pourcentage.
Groupe de boutons
Retirer de l'extérieur et ajouter float:left ensemble de boutons:
Avec Groupe de boutons de la frontière
Nous pouvons utiliser la border propriété pour définir le groupe de boutons avec la frontière: