Personnaliser un bouton

Par Clouder le 16 Apr 2019 (Édité) 0 +99

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. 😎👌

Cette pub permet au site de vivre ...

Commentaire

Tu veux participer ?
Alors connecte toi ou inscris toi et viens participer !
Cette pub permet au site de vivre ...