En este tutorial aprenderás a crear un increíble botón con efecto de luz de neón utilizando solo HTML y CSS. Este tipo de botón puede dar un toque moderno y atractivo a tus proyectos web, ideal para resaltar enlaces importantes o botones de acción.
El botón neon que crearemos destaca por sus bordes brillantes y el efecto de luz que se activa al pasar el cursor sobre él. Esto se logra con la ayuda de transiciones CSS y animaciones que crean la sensación de movimiento de la luz alrededor del botón.
Este botón no solo es visualmente atractivo, sino que también es responsive, lo que significa que se verá bien en cualquier tamaño de pantalla, desde dispositivos móviles hasta escritorios.
¿Qué aprenderás en este tutorial?
En este tutorial aprenderás a:
- Crear un botón con efecto neón brillante utilizando solo HTML y CSS.
- Aplicar animaciones en los bordes del botón para lograr un efecto dinámico al interactuar con él.
- Usar propiedades CSS como box-shadow, linear-gradient, y transitions para crear efectos avanzados.
- Estilizar un botón para que sea interactivo y moderno.
¿Qué recursos necesitarás para realizar el proyecto?
Para completar este proyecto necesitarás:
- Un editor de código como Visual Studio Code, Sublime Text, o similar.
- Conocimientos básicos de HTML y CSS.
- Opcional: Un entorno de prueba en vivo, como una página web local o servicios como CodePen.
Cómo Crear un Botón de Luz de Neón con HTML y CSS
Código HTML:
<span> que serán utilizados para los efectos de luz animada en los bordes del botón.Código CSS:
El código CSS contiene los estilos y animaciones que permiten al botón simular el efecto de luz de neón. Los bordes del botón brillan y se expanden cuando el usuario pasa el cursor por encima.
Explicación del CSS:
- Botón (
.btn-neon): El botón tiene un diseño básico con texto blanco, sin bordes visibles por defecto, pero con un alto contraste gracias al fondo oscuro del cuerpo de la página. - Hover Effect (
.btn-neon:hover): Cuando el usuario pasa el cursor sobre el botón, se activa el fondo neón púrpura con un resplandor que emite una luz brillante utilizando la propiedad box-shadow. - Efecto de Luz en los Bordes: Los bordes del botón son manejados por los
<span>ocultos que, con la ayuda de linear-gradient, crean un efecto de luz que parece moverse alrededor del botón al hacer hover. - Transiciones: Se utiliza la propiedad transition para controlar la velocidad y la secuencia de las animaciones, dándoles un retraso gradual (utilizando transition-delay) para que los bordes brillen en un orden específico.
Vista Previa:
vista previa del botón de neón en acción, mostrando el efecto de luz al pasar el cursor.
Conclusión:
El botón con efecto de luz de neón es una manera moderna y atractiva de hacer que tus botones resalten en tu sitio web. Con solo HTML y CSS puedes crear una animación dinámica y visualmente llamativa, sin necesidad de utilizar JavaScript. ¡Ponlo en práctica y dale vida a tu diseño web!
