Dans cet article nous allons apprendre à utiliser le CSS afin de personnaliser un bouton simple à l'allure simple en un bouton design ! 😁
Tout d'abord dans notre fichier HTML nous allons déclarer un bouton avec la balise button et attribuer un attribut de type class que l'on nommera cette classe : btn-nouveau
<!DOCTYPE html>
<html>
<head>
<title>Accueil</title>
</head>
<body>
<button class="btn-nouveau">Envoyer</button>
</body>
</html>
Ensuite, dans notre fichier CSS nous allons définir cette class CSS :
.btn-nouveau{
...
}
Maintenant nous allons personnaliser ce bouton :
- Le fond sera transparent,
- Les bords seront arrondis et lisses de 2 pixels d'épaisseur de couleur verte,
- Un texte d'une couleur verte,
- Le curseur de la souris sera un pointeur (une main),
- Un remplissage de la zone de 5 pixels pour le côté haut et bas du bouton et de 10 pixels pour le côté droit et gauche du bouton.
Voici le code CSS :
.btn-nouveau{
background: transparent;
border: 2px solid #27ae60;
border-radius: 10px;
color: #27ae60;
padding: 5px 15px ;
outline: none;
cursor: pointer;
}
Maintenant vous pouvez voir le rendu de votre nouveau bouton avec du CSS depuis votre navigateur. 😎👌