Découvrons ensemble dans cet article, le secret permettant de réaliser cet effet de "remplissage" sur un bouton !
1ère étape
Commençons avec le code HTML.
<a href="#">Wow ça swing !</a>Nous pourrions difficilement faire plus facile !
2ème étape
Stylisons le lien.
a {
width: 200px;
height: 60px;
font-size: 1.3rem;
font-family: arial, sans-serif;
font-weight: 700;
position: relative;
color: white;
z-index: 0;
border: 1px solid #892cdc;
background: black;
overflow: hidden;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}Dans cette étape, nous utilisons flexbox (display: flex) pour pouvoir aligner horizontalement et verticalement le texte à l’intérieur de notre balise a.
Ensuite, nous précisons que nous souhaitons cacher les éléments qui dépassent de notre lien car nous allons créer un immense background grâce au pseudo-élément before.
Ce pseudo-élément recouvrera le background de notre bouton au survol.
3ème étape
Stylisons maintenant le pseudo-élément.
a::before {
content: '';
position: absolute;
top: 60px;
left: 0;
width: 100%;
height: 100%;
background: #892cdc;
border-radius: 50% 50% 0% 0%;
z-index: -1;
transition: all .5s;
}Ici, nous créons un pseudo-élément, que nous cachons par défaut en mettant la propriété top à 60px, ce qui veut dire qu’il n’est pas affiché, car notre bouton fait lui-même 60px.
Nous donnons ensuite des coins arrondis grâce à border-radius, puis nous précisons que nous souhaitons que notre pseudo-élément se place en-dessous du texte de notre bouton, avec z-index.
4ème étape
Stylisons pour finir le lien au survol de la souris.
a:hover::before {
top: 0px;
border-radius: 0;
}Quand nous survolons notre bouton, nous affichons progressivement le pseudo-élément et nous changeons ses coins arrondis en coins rectangulaires.
Voici le secret pour créer cet effet de remplissage.
