| /* 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); | |
| } | |