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 !
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 ?
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);
}
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.
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
.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble votre projet.