3 boutons CSS modernes et originaux (avec le code)

1. Bouton qui s'enfonce au clic

Pour commencer, je vous propose de créer un bouton qui s'enfonce lorsque nous cliquons dessus.

La classe :active est appliquée à l'élément chaque fois qu'il est cliqué ou activé à l'aide du clavier.
Dans l'état par défaut, nous définissons une ombre de boîte (sans flou) et la décalons de 4px à la fois vers la droite et vers le bas.

Dans l'état actif, nous supprimons le décalage de l'ombre de la boîte mais en attendant décalons l'élément lui-même de 4px des deux côtés pour obtenir cet effet.

.btn{ background-color:#28b2e8; box-shadow:#0682B3 4px 4px 0px; border-radius:12px; transition:transform 200ms, box-shadow 200ms; } .btn:active{ transform: translateY(4px) translateX(4px); box-shadow:#0682B3 0px 0px 0px; }

2. Bouton avec un effet lumineux au survol

Voici une petite classe CSS à ajouter à vos boutons pour leur donner un effet lumineux au survol (hover).

La technique consiste à créer un dégradé linéaire au-dessus de l'arrière-plan uni et à le faire glisser de gauche à droite lorsque le bouton est survolé.

Notez que nous définissons la propriété de transition dans l'état de survol afin qu'il n'y ait pas d'animation lorsque le bouton n'est pas survolé.

.btn-light{ background-color:#28b2e8; background-image: linear-gradient(-60deg, transparent, transparent 40%, #ffffff 40%, #ffffff 60%, transparent 60%, tansparent 100%); background-size: 200% 100%; background-repeat: no-repeat; background-position-x: 150%; } .btn-light:hover{ background-position-x:-150%; transition:background-position-x 600ms; }

3. Bouton avec un effet slide au survol

Pour créer ce dernier bouton, je vous partage une petite astuce qui vous donnera une belle animation au survol (hover) de votre bouton.

Ici, nous utilisons un pseudo-élément pour agir comme arrière-plan, qui est par défaut de largeur 0, mais ensuite mis à l'échelle à la largeur d'origine lorsque le bouton est survolé ou mis au point.

Remarque : is() est une pseudo-classe CSS. Elle prend comme argument une liste de sélecteurs pour cibler tous les éléments sélectionnés par chaque sélecteur de cette liste.

.btn{ position: relative; background: none; border: 2px solid #28b2e8; transition: color 200ms; } .btn:is(:hover, :focus){ color: white; } btn::after{ position: absolute; content: ''; inset: 0; z-index: -1; background-color:#28b2e8; transform-origin: left; transform: scaleX(0); transition: transform 200ms; } .btn:is(:hover, :focus)::after{ transform: scale(1); }