Développez votre propre bouton en CSS
Tim
November 20th, 2023
Créez un Bouton en HTML et CSS : Guide rapide et efficace
Les boutons ? Vous allez en rencontrer partout, et à toutes les sauces. Donc, autant savoir comment en faire. De plus, ce sont des éléments essentiels dans la conception d'interfaces utilisateur. Dans cet article, nous explorerons étape par étape comment créer un bouton stylisé en utilisant HTML et CSS. Sans plus attendre, let's go !
Structure HTML de Base
Commencez par créer la structure HTML de base pour le bouton. Utilisez une balise <button> pour le bouton lui-même. Ajoutez une classe ou un ID pour cibler le bouton avec du CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Création d'un Bouton</title>
</head>
<body>
<button class="custom-button">Cliquez-moi</button>
</body>
</html>Styles CSS de Base
Créez un fichier styles.css et ajoutez des styles de base pour le bouton. Voyons ensemble quels sont les éléments clés.
padding: les marges intérieures sont cruciales pour dimensionner le bouton. En jouant avec les valeurs, on peut avoir des plus ou moins gros bouton.flex: et oui, l'incontournable flexbox permet de center le texte (et icône s'il y en a) à l'intérieur du bouton. J'ai écrit un article pour bien prendre en main cet outil puissant ici. Néanmoins, on peut très bien s'en sortir autrement en utiliser d'autres techniques que j'ai détaillées ici.ombre et effet de survol: pour donner l'impression que votre bouton est vivant (interactif), ajouter une ombre est une option intéressante. Lorsque la souris de l'utilisateur passe sur le bouton, assombrissez-le (ou éclaircissez-le) pour indiquer qu'il est interactif. N'oubliez pas de régler la transition ainsi que le timing pour que l'effet ne soit pas trop brusque, car cela peut être choquant parfois.border-radius: l'arrondi de la bordure est un élément important pour apporter une variation à vos boutons. En appliquant une valeur élevée, vous obtiendrez des boutons plus arrondis, tandis qu'une valeur plus petite donnera un bouton plus carré. Attention cependant : si vous ne mettez aucune valeur, votre bouton pourrait sembler froid, brouillon, voire démodé. Une légère valeur, comme 4px ou 6px par exemple, apporte un design sobre, mais intéressant.
Vous pouvez essayer l'exemple qui suit :
/* ./style.css */
html, body { padding: 0; margin: 0;}
main { display: flex; flex-direction: column; gap: 15px; }
section {
background-color: #eeeeee;
padding: 30px 40px;
font-size: 1.5rem;
display: flex; justify-content: center;
}
.custom-button {
background-color: #3498db;
color: #ffffff;
padding: 15px 30px;
font-size: 16px;
border: none;
/* border-radius: 5px; */
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease;
font-weight: bold;
}
.custom-button:hover {
background-color: #2980b9;
}Détaillons le Code CSS
background-color: Définit la couleur de fond du bouton.
color: Définit la couleur du texte.
padding: Ajoute de l'espace à l'intérieur du bouton.
font-size: Définit la taille du texte.
border: Supprime la bordure par défaut du bouton.
border-radius: Arrondit les coins du bouton.
cursor: Indique que le bouton est interactif.
transition: Ajoute une transition en douceur lors du survol du bouton.
Allez plus loin
Il est commun d'ajouter une icône à un bouton. On peut également ajouter un dégradé pour la couleur de fond. Bref, les idées et donc les possibilités sont illimitées. Je vous laisse le soin d'expérimenter de vous-même. Car le CSS, c'est ça, c'est la pratique ! Bon courage pour votre apprentissage.
Conclusion
Félicitations ! Vous en savez un rayon maintenant sur les boutons. Utilisez ce guide comme point de départ et personnalisez-le selon les besoins de votre projet et vos envies. N'ayez pas peur d'expérimenter avec différentes propriétés CSS pour obtenir le look parfait.
Restez à l'affût pour d'autres tutoriels pratiques sur le développement web !