Toggle – css e div
Iniziamo inserendo il div del toggle e il relativo css nello stato di default (nell’esempio, sole / tema chiaro). Per non avere ulteriori elementi a livello di html, il cerchietto bianco viene gestito come una pseudo-classe :before
direttamente nel css.
Nell’esempio vediamo anche la proprietà transition che permette di gestire l’animazione dell’elemento nel passaggio tra le due modalità.
<div id="toggle-btn"></div>
#toggle-btn { display: inline-block; width:86px; height: 48px; background-color: #1EC3F4; background-image: url('background@2x.png'); background-size: 100%; border-radius: 24px; position: relative; transition: all ease-in-out .4s; /* animati tutti gli elementi (all), accelerazione ease-in-out, durata 0.4 secondi */ cursor: pointer; } #toggle-btn::before { position: absolute; width:36px; height: 36px; background-color: white; border-radius: 50%; left:6px; top:6px; content: ''; transition: all ease-in-out .4s; z-index: 10; }