¿Cómo crear un interruptor de palanca usando HTML y CSS?

Toggle Switch

Para crear un interruptor de palanca, usaremos HTML y CSS. Si desea agregar un interruptor de palanca más atractivo, puede agregar animación deslizante, efecto de rebote, etc. En este artículo, dividiremos todo en dos secciones diferentes: creación y diseño de la estructura .

Creación de estructura: en esta sección, solo crearemos una estructura básica para el botón de alternancia. Aquí todo lo que necesitamos es poner una casilla de verificación y una etiqueta para crear un documento HTML como el que se muestra a continuación. Podemos hacerlo usando la etiqueta de etiqueta HTML y el tipo de entrada HTML = casilla de verificación.

Código HTML: El código HTML se utiliza para crear una estructura de interruptor de palanca. Dado que no contiene CSS, es solo una estructura simple. Usaremos algunas propiedades de CSS para que sea atractivo y receptivo.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>toggle switch</title>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <b>Toggle switch with HTML and CSS</b>
        <br><br>
        <input type="checkbox" id="switch"
                    class="checkbox" />
        <label for="switch" class="toggle">
             
 
<p>OFF    ON</p>
 
 
        </label>
    </center>
</body>
 
</html>

 
Estructura de diseño: en la sección anterior, hemos creado la estructura del interruptor de palanca. Diseñaremos el interruptor y lo haremos receptivo en esta sección.

  • Código CSS: el código CSS se utiliza para crear un componente HTML atractivo. Esta propiedad CSS se usa para hacer el estilo en el interruptor de palanca.

CSS

<style>
    h1 {
        color: green;
    }
           
    /* toggle in label designing */
    .toggle {
        position : relative ;
        display : inline-block;
        width : 100px;
        height : 52px;
        background-color: red;
        border-radius: 30px;
        border: 2px solid gray;
    }
           
    /* After slide changes */
    .toggle:after {
        content: '';
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: gray;
        top: 1px;
        left: 1px;
        transition:  all 0.5s;
    }
           
    /* Toggle text */
    p {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    }
           
    /* Checkbox checked effect */
    .checkbox:checked + .toggle::after {
        left : 49px;
    }
           
    /* Checkbox checked toggle label bg color */
    .checkbox:checked + .toggle {
        background-color: green;
    }
           
    /* Checkbox vanished */
    .checkbox {
        display : none;
    }
</style>

Combinación de código HTML y CSS: este es el código final que es la combinación de las dos secciones anteriores. Mostrará el interruptor de palanca.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>toggle switch</title>
     
    <style>
        h1 {
            color: green;
        }
               
        /* toggle in label designing */
        .toggle {
            position : relative ;
            display : inline-block;
            width : 100px;
            height : 52px;
            background-color: red;
            border-radius: 30px;
            border: 2px solid gray;
        }
               
        /* After slide changes */
        .toggle:after {
            content: '';
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: gray;
            top: 1px;
            left: 1px;
            transition:  all 0.5s;
        }
               
        /* Toggle text */
        p {
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
        }
               
        /* Checkbox checked effect */
        .checkbox:checked + .toggle::after {
            left : 49px;
        }
               
        /* Checkbox checked toggle label bg color */
        .checkbox:checked + .toggle {
            background-color: green;
        }
               
        /* Checkbox vanished */
        .checkbox {
            display : none;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <b>Toggle switch with HTML and CSS</b>
        <br><br>
        <input type="checkbox" id="switch"
                    class="checkbox" />
        <label for="switch" class="toggle">
             
 
<p>OFF    ON</p>
 
 
        </label>
    </center>
</body>
 
</html>

Producción: 

HTML y CSS son la base de las páginas web. HTML se usa para el desarrollo de páginas web al estructurar sitios web, aplicaciones web y CSS se usa para diseñar sitios web y aplicaciones web. Puede obtener más información sobre HTML y CSS en los enlaces que figuran a continuación:

Publicación traducida automáticamente

Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *