Découvrons dans cet article comment réaliser un bouton de type "arc-en-ciel" qui s'anime au survol de la souris. Effet moderne et sensationnel garanti !
1ère étape
Le code HTML.
<button>
Clique-moi
</button>Notre code HTML se résume à un simple bouton. Nous pourrions difficilement faire plus simple, n’est-ce pas ?
2ème étape
Stylisons notre bouton.
button {
padding: 20px 50px;
font-size: 1.5rem;
cursor: pointer;
border: 0px;
background: transparent;
position: relative;
transition: all .2s;
overflow: hidden;
color: #fff;
border-radius: 30px;
box-shadow: 0px -0px 0px 0px rgba(143, 64, 248, .5), 0px 0px 0px 0px rgba(39, 200, 255, .5);
}
3ème étape
Ajoutons un carré arc-en-ciel.
button::after {
content: '';
width: 400px;
height: 400px;
position: absolute;
top: -50px;
left: -100px;
background-image: linear-gradient(225deg, #27d86c 0%, #26caf8 50%, #c625d0 100%);
z-index: -1;
transition: all .5s;
}Dans l’étape précédente, nous créons un “carré” arc-en-ciel. Il s’agit simplement d’un carré de 400px sur 400px que nous décalons sur le côté grâce aux propriétés top et left afin de récupérer la plus belle partie du dégradé.
Ce carré arc-en-ciel fera office de background pour notre bouton, il ne dépassera pas grâce à la propriété overflow: hidden que nous avions ajouté à l’étape 2.
4ème étape
Ajoutons les effets au survol.
button:hover::after {
transform: rotate(150deg);
}
button:hover {
transform: translate(0,-6px);
box-shadow: 10px -10px 25px 0px rgba(143, 64, 248, .25), -10px 10px 25px 0px rgba(39, 200, 255, .25);
}Ici, nous faisons juste tourner notre carré arc-en-ciel pour changer le dégradé affiché sur le background de notre bouton.
Nous en profitons pour le surélever vers le haut grâce à propriété transform puis nous ajoutons une ombre plus importante grâce à la propriété box-shadow.
