Si te gusta el desarrollo web, seguramente sabrás qué es un “interruptor de palanca”. Casi no hay sitio web o aplicación web que no los esté utilizando hoy en día.
¿Qué es un interruptor de palanca CSS?
Es un elemento de diseño que proporciona a los usuarios una forma de elegir entre dos estados diferentes. Comúnmente utilizado en sitios web, aplicaciones móviles y otro software.
Cuando se usa en el desarrollo web, un interruptor de palanca no es un elemento nativo, por lo que los desarrolladores han ideado formas de imitar este elemento usando solo HTML y CSS.
Por lo general, se usa una casilla de verificación oculta debajo del capó para realizar un seguimiento del estado del interruptor de palanca.
Su navegador no soporta la etiqueta de vídeo.
20 mejores interruptores de palanca CSS
Aquí hay una lista de los mejores ejemplos de interruptores de palanca de CSS que hemos encontrado. Todos ellos en CSS puro y sin una sola línea de JavaScript involucrada:
1. Interruptor de palanca de modo oscuro
A todos nos encanta el modo oscuro. Y si planea implementarlo en su sitio, probablemente usará algún tipo de interruptor Saba.
Este interruptor ha sido diseñado específicamente para este propósito y el resultado es simplemente hermoso.
El interruptor cambia de un ícono de luna blanca con un fondo oscuro (la noche) a un círculo que representa el sol sobre un fondo blanco.
Es un cambio de CSS puro, ¡así que no hay que preocuparse por JavaScript! ¡Belleza pura!
2. Interruptor de palanca CSS con texto
Si necesita un conmutador que contenga un texto corto como “Sí” o “No”, entonces le encantará este. Himalaya.
Este ejemplo de un conmutador viene con 18 efectos diferentes. ¡Y lo mejor es que cada uno es mejor que el anterior!
Puedes pasar del tradicional interruptor de palanca a algo un poco más atrevido pasando por interruptores más normales pero con un ligero toque que los hace destacar.
¡Todas las animaciones están hechas en CSS puro y son súper fluidas!
3. Interruptor de palanca css puro
Creado por marcuseste es el interruptor basculante básico y probablemente el perfecto para aquellos que buscan un interruptor basculante solo de CSS.
Lo que personalmente me gusta de él es que tiene una animación adicional que ocurre justo cuando hacemos clic en el interruptor, antes de soltar el botón.
Esta pequeña animación agrega de manera muy inteligente un pequeño pero notable efecto elástico que le da a este interruptor una sensación moderna.
4. Botón de cambio de palanca CSS
Algunas personas podrían estar buscando botones reales que tengan un estado de alternancia. El término botón de cambio de palanca puede ser un poco confuso, pero si está buscando botones reales con dos estados, este ejemplo es para usted.
Este interruptor fue creado por Mauricio y contiene 5 interruptores diferentes de los cuales dos de ellos se consideran botones.
¡Los efectos sesgados y de volteo pueden ser lo que estás buscando!
5. interruptor de palanca iOs CSS
Muy probablemente fue iOS con su iPhone lo que hizo que la alternancia estuviera de moda en el desarrollo web, por lo que no es de extrañar que a muchas personas les guste imitar este mismo aspecto para su sitio web.
Aquí hay un buen ejemplo de alma fría de un interruptor de palanca que imita ese mismo efecto y que lo hace con el mismo diseño y funcionalidad.
Y por supuesto, también es compatible con dispositivos táctiles.
6. Etiqueta para interruptor de palanca
Por lo general, cada entrada tiene un elemento de etiqueta asociado para proporcionar una descripción. Cuando use un interruptor de palanca, es posible que desee hacer lo mismo.
Si bien probablemente podrá integrar una etiqueta con la mayoría de los interruptores anteriores que hemos mencionado en el artículo, aquí hay un ejemplo de otro interruptor que incluye la etiqueta para que pueda copiar y pegar si lo desea.
Observe cómo la palanca cambia de estado al hacer clic sobre la etiqueta. Este es el comportamiento esperado para las etiquetas cuando se implementan correctamente.
Gracias a morgan por crear este hermoso interruptor.
7. Interruptor de palanca con etiqueta rodante
Si quieres ponerte elegante con las etiquetas de alternar, aquí hay un gran ejemplo de cómo llevarlo al extremo.
Esta palanca creada por Jon cambiará su etiqueta en función de su estado pero lo hace de una forma bastante inesperada. La etiqueta cambia con un agradable efecto de suavizado y todo el fondo de la página cambia con ella.
Ideal para usar como un elemento grande en un sitio web de pantalla completa. Especialmente si también quieres usar el efecto de fondo deslizante que viene con él.
8. Interruptor de palanca accesible con verificación
La accesibilidad debería ser una prioridad en la web hoy en día. Esta palanca de la mano de Homero switch nos demuestra que la belleza y el diseño pueden ir de la mano.
Puede probar su accesibilidad usando el teclado para activar el cambio de estado. Haga clic en él y luego use la tecla de la barra espaciadora para alternar entre ambos estados.
Además, observe cómo se puede enfocar el elemento cuando presiona la tecla de tabulación, que es el comportamiento esperado para la mayoría de los elementos de entrada.
Y si aún necesita más, esta palanca también admite el atributo deshabilitado y se comporta en consecuencia, pero no admite el enfoque ni reacciona a los eventos del teclado o el mouse.
10 Interruptor de palanca Bootstrap 5 CSS
Si está utilizando Bootstrap, es posible que desee consultar este ejemplo de codepen creado por Nisharg.
Utiliza Bootstrap 5 y muestra diferentes tamaños de conmutadores mediante el uso puro de HTML y CSS sobre el archivo CSS de Bootstrap.
11 Interruptor de palanca elástico CSS
Este ejemplo por Sivacva añade un pequeño toque de originalidad al interruptor tradicional añadiendo dos efectos adicionales. Un brillo o sombra que aparece cuando el interruptor está en ON y algún tipo de efecto elástico.
Esto hace que este efecto de alternar sea un poco más único y satisfactorio de usar que otros, al mismo tiempo que lo mantiene simple.
12 Interruptor de palanca de sol y luna
Este alternar por Satyam lleva el modo oscuro al siguiente nivel mediante el uso de gráficos mucho más detallados.
Utiliza las figuras del sol y la luna para representar ambos estados, modos oscuros y claros.
El sol amarillo se representa con un fondo azul como el cielo y la luna blanca con un cielo negro y una estrella.
Personalmente, me encantan las animaciones que tienen lugar en este interruptor de palanca. El sol se convierte en una estrella y la luna aparece desde el fondo.
14 Interruptor de modo oscuro con texto
A veces, es posible que desee agregar una palabra completa dentro del interruptor de palanca en lugar de usar una etiqueta externa para ello.
Si ese es el caso, este ejemplo de alternar por nadeesha Seguro que te traerá alegría 🙂
Además de tener un mundo completo, este ejemplo de alternar está diseñado específicamente para sitios web que incluyen modo oscuro.
Notarás como toda la página se vuelve blanca o negra dependiendo de su estado.
15. Interruptor de palanca de día y noche
Si desea ir por todo lo alto con efectos elegantes, no puede perderse este interruptor de palanca al Raunaq.
Este interruptor de día y noche es absolutamente una obra de arte. Hay tantos detalles al respecto. Hecho con un gran gusto de diseño, este interruptor muestra un hermoso sol con nubes en movimiento y una luna con estrellas fugaces.
¡Es casi increíble que esto esté hecho con CSS puro!
dieciséis. Enorme interruptor de palanca
Aquí hay otro ejemplo de un cambio de día y noche llevado al extremo por Lurx.
Ideal para usar en un tamaño enorme para sitios web no divertidos o con un ambiente casual que quieran captar la atención del visitante y crear una experiencia única para él.
Hecho solo con CSS.
17 Interruptor de palanca rodante
Aquí hay un interruptor de palanca de CSS puro y bellamente diseñado codificado por claudia que alguna animación rodante.
Utiliza una figura del robot de Star Wars RD-D2 para darle un toque divertido.
18 Interruptor de palanca de color – Redondeado y rectangular
Aquí hay un ejemplo de múltiples conmutadores con diferentes colores en formas redondeadas y cuadradas.
Traído a la vida por Kunduzeste interruptor viene con dos intensidades de color según el estado del interruptor.
Personalmente, me gusta la palanca redondeada, pero puede haber casos en los que la cuadrada pueda ser útil.
19 Interruptor de palanca CSS de tres estados
¿Quién dijo que un interruptor de palanca solo puede tener dos etiquetas o dos estados?
ricardo nos muestra en este ejemplo que un conmutador de palanca puede contener tres estados y, por qué no, incluso tres etiquetas si las coloca encima de cada estado.
Y todo se hizo sin JavaScript en absoluto. Impresionante eh?
20 Cambio de modo oscuro CSS puro
Un gran ejemplo de interruptor presentado por Benjamín eso da como resultado un elemento de alternar bastante hermoso simplemente usando CSS.
Además de eso, es un interruptor de palanca que viene con dos etiquetas que también pueden ser muy útiles. Las animaciones de aceleración son fluidas y agregan un toque moderno a esta palanca.
Artículos relacionados
