Style de bouton dans CSS | Expliqué
- Changer les couleurs des boutons
- Modification des tailles de boutons
- Création de boutons arrondis ou encerclés
- Ajout de l'effet de survol aux boutons
- Ajout d'effets aux boutons
- Ajout d'ombres aux boutons
- Style des boutons désactivés
Commençons.
Comment changer les couleurs des boutons
Dans le but de changer les couleurs, plus précisément, les couleurs d'arrière-plan des boutons, la propriété CSS Background-Color est utilisée. Ci-dessous, nous vous avons présenté un exemple.
Html
En utilisant HTML de base, nous avons créé un bouton.
CSS
.btnColor en arrière-plan: Rosybrown;
Border: aucun;
Couleur blanche;
rembourrage: 20px 35px;
taille de police: 16px;
En plus de donner au bouton un certain rembourrage, bordure et taille de police, nous avons réglé la couleur de fond sur Rosy Brown. Vous pouvez changer la couleur en fonction de votre désir.
Sortir
Un bouton avec une couleur de fond brun rose a été créé.
Si vous souhaitez ajouter des couleurs uniquement à la bordure du bouton, utilisez la propriété CSS Border.
CSS
.btnColor d'arrière-plan: blanc;
Border: 2px bleu massif;
la couleur noire;
rembourrage: 25px;
taille de police: 16px;
Dans le code ci-dessus, nous définissons la couleur d'arrière-plan sur blanc, en attendant, la bordure solide a reçu une longueur de 2px avec une couleur bleue.
Sortir
Un bouton avec une bordure bleue a été généré.
Comment modifier les tailles des boutons
Il peut y avoir diverses façons de modifier la taille du bouton et toutes les façons possibles sont décrites ci-dessous avec les exemples appropriés et au point.
Méthode 1: En modifiant le rembourrage des boutons
La première façon la plus utilisée de modifier la taille d'un bouton consiste à utiliser la propriété de rembourrage. Un rembourrage différent se traduira par différentes tailles d'un bouton.
CSS
.btnColor en arrière-plan: Rosybrown;
Border: aucun;
Couleur blanche;
taille de police: 16px;
.btn1
rembourrage: 10px 24px;
.btn2
rembourrage: 32px 16px;
Le haut et les côtés inférieurs du premier bouton ont reçu un rembourrage de 10px, en attendant les côtés à droite et gauche reçoivent un rembourrage de 24px. Quant au deuxième bouton, le haut et les côtés inférieurs sont fournis avec un rembourrage de 32px chacun, tandis que les côtés droite et gauche sont donnés avec un rembourrage de 16px.
Sortir
Des boutons avec divers paddages ont été créés.
Méthode 2: En modifiant la taille de la police
Une autre façon de modifier la taille d'un bouton est de modifier la taille de la police du bouton TE. En augmentant ou en diminuant la taille de la police, la taille du bouton est affectée. Plus la taille de la police est grande, plus le bouton est grand. Considérez l'extrait de code ci-dessous.
Html
Ici, nous avons créé deux boutons pour démontrer la différence entre les différentes tailles de police et comment celles-ci affectent les tailles de bouton.
CSS
.btnColor en arrière-plan: Rosybrown;
Border: aucun;
Couleur blanche;
rembourrage: 20px 35px;
.btn1
taille de police: 12px;
.btn2
taille de police: 24px;
Les deux boutons ont été affectés à la même couleur d'arrière-plan, couleur, bordure et rembourrage. Cependant, le premier bouton a reçu la taille de la police de 12px et l'autre bouton 24px.
Sortir
Des boutons de différentes tailles ont été créés avec succès.
Méthode 3: En modifiant la largeur des boutons
Une autre façon de modifier la taille d'un bouton est de régler sa largeur. Suivez l'exemple ci-dessous.
CSS
.btnColor en arrière-plan: Rosybrown;
Border: aucun;
Couleur blanche;
rembourrage: 20px 35px;
bloc de visualisation;
marge: 5px 3px;
taille de police: 16px;
.btn1
Largeur: 20%;
.btn2
Largeur: 50%;
Dans le but d'afficher chacun des bouton dans une nouvelle ligne, nous les convertissons en éléments au niveau des blocs et définissons leurs marges. De plus, la largeur du premier bouton est définie sur 20%, tandis que la largeur du deuxième bouton est définie à 50%.
Sortir
Des boutons avec diverses largeurs ont été créés avec succès.
Comment créer des boutons arrondis ou encerclés
Pour créer des boutons arrondis ou encerclés, utilisez la propriété CSS Border-Radius. Nous vous avons présenté un exemple ci-dessous.
CSS
.btnColor en arrière-plan: Rosybrown;
Border: aucun;
Couleur blanche;
rembourrage: 25px;
taille de police: 16px;
.btn1
Border-Radius: 8px;
.btn2
Border-Radius: 50%;
Dans le code ci-dessus, dans le but d'arrondir uniquement les coins du bouton, nous donnons à la Border-Radius une valeur en pixels. Cependant, pour faire du bouton un cercle complet, nous avons donné au Radius frontalier une valeur en pourcentage.
Sortir
Un bouton arrondi et encerclé a été créé avec une grande facilité.
Comment ajouter l'effet de survol aux boutons
Pour rendre vos boutons plus intéressants, vous pouvez leur ajouter un effet de survol pour rendre leur apparence plus attrayante. Utilisez l'extrait de code ci-dessous.
CSS
.btnColor d'arrière-plan: blanc;
Border: Rosybrown solide 2px;
la couleur noire;
rembourrage: 25px;
taille de police: 16px;
.BTN: Hover
Color en arrière-plan: Rosybrown;
Couleur blanche;
Avant l'effet de survol, le bouton a été stylé en utilisant diverses propriétés CSS. Pendant ce temps, une fois que l'utilisateur apportera la souris sur le bouton, la couleur d'arrière-plan changera en brun rose et en couleur de police en blanc.
Sortir
Un bouton avec un effet de survol a été généré.
Une autre chose amusante que vous pouvez faire est que vous spécifiez la durée de transition de l'effet de survol pour la rendre plus attrayante en utilisant la propriété de durée de transition.
CSS
.btnColor d'arrière-plan: blanc;
Border: Rosybrown solide 2px;
la couleur noire;
rembourrage: 25px;
taille de police: 16px;
Durée de transition: 0.5s;
.BTN: Hover
Color en arrière-plan: Rosybrown;
Couleur blanche;
La durée de transition a été définie à 0.5 secondes.
Sortir
Un effet de survol avec une durée de transition a été ajouté avec succès.
Comment ajouter un fondu en vigueur aux boutons
Les effets de fondu sont utilisés avec des effets de survol et ils peuvent être ajoutés aux boutons à l'aide de la propriété Opacity. Voici un exemple.
CSS
.btnColor en arrière-plan: Rosybrown;
Border: aucun;
Couleur blanche;
rembourrage: 30px;
taille de police: 16px;
Opacité: 0.4;
Durée de transition: 0.5s;
.BTN: Hover
Opacité: 1;
Avant l'effet de survol, l'opacité du bouton a été définie sur 0.4. Alors que, lorsque l'effet de survol entrave, l'opacité se transformera à 1 avec une durée de transition de 0.5 secondes.
Sortir
Un fondu en vigueur a été mis en œuvre avec succès.
Hwo pour ajouter des ombres aux boutons
À l'aide de la propriété Box-Shadow, des ombres peuvent être ajoutées aux boutons pour améliorer leur beauté. Suivez l'exemple mentionné ci-dessous.
CSS
.btnColor en arrière-plan: Rosybrown;
Border: aucun;
Couleur blanche;
rembourrage: 30px;
taille de police: 16px;
Durée de transition: 0.5s;
Box-shadow: 0 5px 10px 0 gris;
Dans le code ci-dessus, nous ajoutons une ombre de couleur grise et nous avons attribué chaque côté de l'ombre une longueur.
Sortir
Une ombre a été ajoutée avec succès au bouton.
Note: Vous pouvez également ajouter un effet de survol avec l'ombre pour rendre le bouton plus attrayant.
Comment coiffer les boutons handicapés
Pour créer un bouton de désactivation, nous devons mentionner un attribut désactivé à la balise de bouton dans HTML, comme indiqué dans l'extrait HTML ci-dessous:
Aux fins des boutons désactivés, vous pouvez utiliser deux propriétés CSS qui sont: l'opacité et le curseur. Ci-dessous, nous avons démontré comment vous pouvez créer un bouton désactivé.
CSS
.btnColor en arrière-plan: Rosybrown;
Border: aucun;
Couleur blanche;
rembourrage: 30px;
taille de police: 16px;
Durée de transition: 0.5s;
Opacité: 0.4;
curseur: non allongé;
Pour créer un bouton désactivé, l'opacité du bouton a été à 0.4 et le curseur à non allongé.
Sortir
Un bouton désactivé a été généré.
Conclusion
L'ajout de boutons simples à vos pages Web peut être un peu ennuyeux, cependant, les styler en utilisant diverses propriétés CSS peut améliorer leur look global. Des propriétés comme la couleur d'arrière-plan, la couleur, le rayon de la frontière, l'opacité, le rembourrage, la largeur, la box-shadow, etc. peuvent être utiles lorsque vous donnez un certain style aux boutons. En plus de cela, vous pouvez également ajouter divers effets aux boutons tels que planer ou fondre, etc. De plus, vous pouvez également animer ces effets en utilisant une propriété de transition. Ce message guide diverses façons dont vous pouvez coiffer vos boutons à l'aide d'exemples.