A continuación muestro un ejemplo de como hacer un botón deslizante o slider usando HTML, CSS y JavaScript sencillo.
Este código muestra un ejemplo de cómo crear un botón deslizante o slider utilizando HTML, CSS y JavaScript. El objetivo es cambiar el estado del botón al hacer clic en él.
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
font-family: Arial, sans-serif;
}
/* Estilos del botón deslizante */
.slider {
width: 200px;
height: 40px;
position: relative;
background: linear-gradient(to right, #00d2ff, #3a47d5);
border-radius: 20px;
cursor: pointer;
overflow: hidden;
}
.slider:before {
content: '';
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
width: 80px;
height: 30px;
border-radius: 15px;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: 0.4s;
}
/* Estilo del botón cuando está activado */
.slider.active {
background: linear-gradient(to right, #ff8a00, #e52e71);
}
.slider.active:before {
left: calc(100% - 90px);
}
</style>
</head>
<body>
<div class="slider"></div>
<script>
// Función para cambiar el estado del botón
function toggleSlider() {
var slider = document.querySelector('.slider');
slider.classList.toggle('active');
}
// Evento de clic para cambiar el estado del botón
document.querySelector('.slider').addEventListener('click', toggleSlider);
</script>
</body>
</html>
El código comienza definiendo los estilos CSS para el botón deslizante. El cuerpo del documento HTML está configurado para centrar verticalmente y horizontalmente el botón deslizante en la página. El fondo del cuerpo tiene un color de fondo gris claro.
El botón deslizante en sí se representa mediante la clase CSS «.slider». Tiene un ancho de 200 píxeles, una altura de 40 píxeles y utiliza una combinación de colores degradados (linear-gradient) para el fondo. También tiene bordes redondeados, un cursor de tipo «pointer» y un estilo de desbordamiento oculto.
Además, se utiliza la pseudo-clase «:before» para crear un elemento adicional dentro del botón que se utiliza como el control deslizante propiamente dicho. Este control deslizante tiene un fondo blanco, sombra de caja y una transición suave de 0.4 segundos. Inicialmente, se posiciona en la parte izquierda del botón.
La clase CSS «.slider.active» define el estilo del botón cuando está activado. En este caso, se modifica el fondo del botón para tener un degradado de colores diferente y se desplaza el control deslizante hacia la derecha hasta alcanzar la posición final.
El código JavaScript incluido crea una función llamada «toggleSlider()» que cambia el estado del botón. Cuando se invoca, esta función selecciona el elemento con la clase «.slider» y utiliza el método «classList.toggle()» para alternar la presencia de la clase «active» en el elemento. Esto significa que si la clase está presente, se eliminará, y si no está presente, se agregará.
Finalmente, se agrega un evento de clic al elemento con la clase «.slider» que llama a la función «toggleSlider()» cuando se hace clic en el botón. Esto permite cambiar el estado del botón deslizante al hacer clic en él.
El resultado es el siguiente:
Espero que les sirva de ayuda , feliz día!!
