CSS - Boutons : Un Guide Complet pour les Débutants
Salut à toi, futur développeur web ! Aujourd'hui, nous allons plonger dans le monde merveilleux des boutons CSS. D'ici la fin de ce tutoriel, vous serez en mesure de créer des boutons qui non seulement fonctionnent bien, mais qui ont aussi un aspect impressionnant. Alors, c'est parti !
Boutons CSS - Exemple de Base
Commençons par un bouton simple. Voici le HTML et le CSS nécessaires :
<button class="basic-button">Cliquez-moi !</button>.basic-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}Cela crée un bouton vert avec du texte blanc. La propriété padding lui donne une certaine taille, tandis que cursor: pointer change le curseur de la souris en main lorsque vous passez le souris sur le bouton.
Boutons CSS Couleurs
Les boutons peuvent être de n'importe quelle couleur que vous souhaitez ! Voici comment créer des boutons de différentes couleurs :
<button class="blue-button">Bleu</button>
<button class="red-button">Rouge</button>
<button class="yellow-button">Jaune</button>.blue-button {background-color: #008CBA;}
.red-button {background-color: #f44336;}
.yellow-button {
background-color: #ffeb3b;
color: black;
}Notez comment nous avons utilisé du texte noir pour le bouton jaune pour assurer la lisibilité.
Boutons CSS Tailles
Vous pouvez facilement créer des boutons de différentes tailles en ajustant la font-size et le padding :
<button class="small-button">Petit</button>
<button class="medium-button">Moyen</button>
<button class="large-button">Large</button>.small-button {
font-size: 12px;
padding: 10px 24px;
}
.medium-button {
font-size: 16px;
padding: 12px 28px;
}
.large-button {
font-size: 20px;
padding: 14px 40px;
}Boutons CSS Padding
Le padding est crucial pour la taille des boutons. Expérimentons avec différents valeurs de padding :
<button class="padding-button1">Bouton 1</button>
<button class="padding-button2">Bouton 2</button>.padding-button1 {
padding: 10px 20px;
}
.padding-button2 {
padding: 15px 40px;
}Souvenez-vous, la première valeur est pour le padding en haut et en bas, la seconde pour le padding à gauche et à droite.
Boutons CSS Arrondis
Vous souhaitez adoucir ces angles aigus ? Utilisez border-radius :
<button class="rounded-button">Arrondi</button>.rounded-button {
border-radius: 12px;
}Expérimentez avec différents valeurs pour obtenir la rondeur que vous désirez !
Boutons CSS Bords Colorés
Ajoutons quelques bords à nos boutons :
<button class="border-button">Bordé</button>.border-button {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}Cela crée un bouton blanc avec un bord vert et du texte noir.
Boutons CSS pouvant être survolés
L'interactivité est clé ! Transformons nos boutons pour qu'ils changent lors du survol :
<button class="hover-button">Survolez-moi</button>.hover-button {
background-color: white;
color: black;
border: 2px solid #008CBA;
transition: 0.3s;
}
.hover-button:hover {
background-color: #008CBA;
color: white;
}La propriété transition assure un changement de couleur en douceur.
Boutons CSS à Ombre
Ajoutez de la profondeur à vos boutons avec des ombres :
<button class="shadow-button">Ombre</button>.shadow-button {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}La propriété box-shadow ajoute un effet ombre au bouton.
Boutons CSS Désactivés
Parfois, vous devez désactiver des boutons :
<button class="disabled-button" disabled>Désactivé</button>.disabled-button {
opacity: 0.6;
cursor: not-allowed;
}La propriété opacity rend le bouton fade, tandis que cursor: not-allowed change le curseur pour indiquer que le bouton ne peut pas être cliqué.
Boutons CSS Largeur
Vous pouvez contrôler la largeur des boutons en utilisant des pourcentages ou des valeurs fixes :
<button class="full-width">Largeur Complète</button>
<button class="half-width">Largeur Moitié</button>.full-width {
width: 100%;
}
.half-width {
width: 50%;
}Boutons CSS Groupes
Groupez vos boutons pour un aspect cohérent :
<div class="button-group">
<button>Gauche</button>
<button>Milieu</button>
<button>Droite</button>
</div>.button-group button {
float: left;
}
.button-group button:not(:last-child) {
border-right: none;
}Cela crée un ensemble de boutons alignés horizontalement.
Boutons CSS Groupes à Bordures
Ajoutez des bords à vos groupes de boutons :
<div class="border-button-group">
<button>Apple</button>
<button>Samsung</button>
<button>Sony</button>
</div>.border-button-group button {
border: 1px solid green;
float: left;
}
.border-button-group button:not(:last-child) {
border-right: none;
}Boutons CSS Groupes Verticaux
Vous pouvez également créer des groupes de boutons verticaux :
<div class="vertical-button-group">
<button>Haut</button>
<button>Milieu</button>
<button>Bas</button>
</div>.vertical-button-group button {
display: block;
width: 100%;
}
.vertical-button-group button:not(:last-child) {
border-bottom: none;
}Boutons CSS sur Image
Placez des boutons sur des images pour un effet accrocheur :
<div class="container">
<img src="image.jpg" alt="Image">
<button class="btn">Bouton</button>
</div>.container {
position: relative;
width: 100%;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Boutons CSS Animés
Ajoutons une animation à nos boutons :
<button class="animated-button">Animé</button>@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.animated-button {
animation: pulse 2s infinite;
}Cela crée un effet de pulsation sur le bouton.
Boutons CSS Effet de Pression
Simulez un effet de pression avec CSS :
<button class="press-button">Pressez-moi</button>.press-button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}Le bouton paraît se déplacer vers le bas lorsque vous cliquez dessus.
Boutons CSS Effet de Fondu
Créez un effet de fondu pour vos boutons :
<button class="fade-in-button">Fondu</button>@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in-button {
animation: fadeIn 2s;
}Ce bouton apparaîtra en fondu lorsque la page se charge.
Boutons CSS Effet de Ripple
Enfin, créons un effet de ripple :
<button class="ripple">Ripple</button>.ripple {
position: relative;
overflow: hidden;
}
.ripple:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.ripple:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}Cela crée un effet de ripple lorsque le bouton est cliqué.
Et voilà ! Vous êtes maintenant équipé des connaissances nécessaires pour créer une grande variété de boutons CSS. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces styles et de créer vos propres boutons uniques. Bon codage !
Credits: Image by storyset