Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

Cómo crear un conmutador de alternancia usando CSS

Este tutorial le mostrará cómo crear un botón de interruptor de alternancia con CSS. En su proyecto donde haya colocado la casilla de verificación para fines de filtrado, reemplace la casilla de verificación con un interruptor de palanca. El interruptor de palanca agregará una experiencia de usuario limpia y ordenada a la funcionalidad de la casilla de verificación. El conmutador se puede crear utilizando CSS puro, por lo que puede usarlo como botón de filtrado en su proyecto web. Si desea proporcionar una mejor experiencia de usuario en el proyecto web, entonces muestre un interruptor en lugar de una casilla de verificación.
Aquí proporcionaremos los fragmentos de código CSS cortos para el interruptor de conmutación normal y redondeado. Use un interruptor de alternancia de estilo normal o redondo basado en el diseño de su página web.

HTML

Agregue el siguiente HTML en el que desea mostrar una casilla de verificación de interruptor de alternancia.
< label  class = "switchBtn" >
    < input  type = "checkbox" >
    < div  class = "slide" > Filter On </ div >
</ label >
Interruptor de palanca de estilo redondeado
< label  class = "switchBtn" >
    < input  type = "checkbox" >
    < div  class = "slide round" > Filter On </ div >
</ label >

CSS

Agregue el siguiente CSS para cambiar la casilla de verificación para cambiar el botón.
.switchBtn {
     posición :  relativo ;
    pantalla :  bloque en línea ;
    ancho :  110 px ;
    altura :  34 px ;
}
.switchBtn  input { display : none ;}
 .slide {
     position :  absolute ;
    cursor :  puntero ;
    arriba :  0 ;
    izquierda :  0 ;
    derecha :  0 ;
    abajo :  0 ;
    color de fondo :  #ccc ;
    -webkit-transición :  .4 s ;
    transición :  .4 s ;
    relleno :  8 px ;
    color :  #fff ;
}
.slide : antes de {
     posición :  absoluta ;
    contenido :  "" ;
    altura :  26 px ;
    ancho :  26 px ;
    izquierda :  78 px ;
    abajo :  4 px ;
    color de fondo :  blanco ;
    -webkit-transición :  .4 s ;
    transición :  .4 s ;
}
entrada : seleccionado + .slide {
     background-color :  # 8CE196 ;
    relleno-izquierda :  40 px ;
}
input : focus + .slide {
     box-shadow :  0  0  1 px  # 01aeed ;
}
entrada : activada + .slide : antes de {
    -webkit-transform : translateX ( 26 px );
    -ms-transform : translateX ( 26 px );
    transformar : traducirX ( 26 px );
    izquierda :  -20 px ;
}
Conmutador de estilo redondeado
Agregue el siguiente CSS con el CSS anterior para hacer que el botón de alternar se redondee.
.slide .round {
     radio-borde :  34 px ;
}
.slide .round : antes de {
     border-radius :  50 % ;
}

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas