Découvrons ensemble dans cet article, le secret permettant de réaliser cet effet de "remplissage" sur un bouton !
Commençons avec le code HTML.
<a href="#">Wow ça swing !</a>
Nous pourrions difficilement faire plus facile !
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.
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
.
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.
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 l’avenir.