Para un ejemplo vistoso que utiliza solo el efecto de hover en CSS, vamos a crear un botón con un efecto de iluminación que se activa cuando pasas el cursor sobre él. Este efecto será tanto visualmente atractivo como funcional, perfecto para captar la atención de los usuarios.
Este botón tiene un fondo oscuro que cambia ligeramente al pasar el cursor, pero lo más destacado es el efecto de sombra que se proyecta alrededor del botón, creando un resplandor. Además, hay un efecto de iluminación que se mueve de izquierda a derecha cuando el usuario pasa el cursor sobre el botón, añadiendo un toque dinámico y moderno.
Recuerda que este ejemplo es totalmente personalizable. Puedes cambiar los colores, las dimensiones, y los tiempos de transición para adaptarlos al diseño de tu sitio web.
HTML <div class="item"> <button class="glow-on-hover">Pasa el Cursor Aquí</button> </div>
CSS
.glow-on-hover {
border: none;
outline: none;
background-color: #343a40;
color: white;
padding: 15px 40px;
font-size: 16px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
transition: all 0.5s ease;
position: relative;
overflow: hidden;
}
.glow-on-hover:hover {
background-color: #495057;
box-shadow: 0 0 15px #1abc9c;
}
.glow-on-hover:hover::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
transition: all 0.65s;
}
.glow-on-hover:hover::before {
left: 100%;
}