Aujourd’hui, notre but est de réaliser un toogle button(bouton alternatif) seulement en HTML et CSS.
Commençons… Le code HTML de ce bouton est on ne peu faire plus simple. C’est une succession de div avec une checkbox au milieu. Il y a juste quelques id à ajouter a balises.
<div id="wrapper">
<h1>Toggle button</h1>
<div id="check">
<input type="checkbox" id="ch">
<div id="before"></div>
<div id="after"></div>
</div>
</div>
Passons à la définition des caractères principaux de notre page et à la position initiale de notre bouton qui se fait grâce à l’‘id before :
#wrapper
{
margin-top: 100px;
}
body
{
padding:30px;
font-family:Nunito;
text-align:center;
color:#444;
}
#check
{
width: 100px;
height:50px;
margin:0 auto;
position: relative;
}
#ch
{
margin: 0px;
width: 100%;
height: 50px;
cursor:pointer;
opacity:0;
position: relative;
z-index: 3;
}
#before
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: #3dd897;
z-index: 1;
border-radius: 50px;
}
Puis on va définir le #after pour la position finale. On va aussi créer des transitions qui vont permettre de créer un effet de fluidité et de rebondissement quand on cliquera :
#after
{
position: absolute;
top: 8px;
left: 8px;
width: 34px;
height: 34px;
background-color: #fff;
border-radius: 50%;
transition: left 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28),
margin-left 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
box-shadow:0px 1px 1px #7d7d7d;
z-index: 2;
}
Enfin on va gérer le déplacement de la bulle blanche à l’aide de :active et de :checked pour quand la checkbox est « remplie » :
#ch:active ~ #after
{
width: 66px;
border-radius: 20px;
}
#ch:checked ~ #after
{
left:58px;
}
#ch:checked:active ~ #after
{
margin-left:-32px;
}
#ch:checked ~ #before
{
background-color: rgb(1, 170, 250);
}
On gère aussi le changement de la couleur de fond du bouton
J’espère que cet article vous a plu. Partagez, share !!!
SublimeCode 