chgpt / static /css /switch.css
Alfredo Villegas
PULL REQUEST: Boton tipo switch para búsqueda en Google
9f6a741
raw
history blame
1.51 kB
/* Estilos del botón para google*/
.switch {
position: relative;
display: inline-block;
min-width: 54px;
max-width: 54px;
height: 30px;
margin: auto;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #a1a1a1;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 23px;
width: 23px;
left: 4px;
bottom: 4px;
background: no-repeat center/80% url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/235px-Google_%22G%22_Logo.svg.png);
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #3BBD96;
}
input:focus+.slider {
box-shadow: 0 0 1px #3BBD96;
}
input:checked+.slider:before {
-webkit-transform: translateX(23px);
-ms-transform: translateX(23px);
transform: translateX(23px);
box-shadow: 0 0 3px rgba(0, 0, 0, 5.5);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
box-shadow: 0 0 3px rgba(0, 0, 0, 5.5);
background: no-repeat center/80% url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/235px-Google_%22G%22_Logo.svg.png);
background-color: white;
}
.switch:has(input:disabled) {
background: #8b8b8b;
filter: contrast(0.5);
}