El efecto de animación del botón de luz de neón se puede generar fácilmente usando HTML y CSS. Al usar HTML, diseñaremos la estructura básica del botón y luego, al usar las propiedades de CSS, podemos crear el efecto de animación de luz de neón.
Código HTML: en esta sección, diseñaremos una estructura de botón simple utilizando una etiqueta de anclaje .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> How to create Neon Light Button using HTML and CSS? </title> </head> <body> <a>GeeksForGeeks</a> </body> </html>
Código CSS: en esta sección, usaremos algunas propiedades CSS para diseñar el botón y usaremos la clase de desplazamiento para obtener el efecto de animación cuando pasemos el mouse sobre el botón.
CSS
<style>
/*styling background*/
body {
margin: 0;
padding: 0;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #000;
font-family: sans-serif;
}
/* styling the button*/
a {
padding: 20px 20px;
display: inline-block;
color: #008000;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
font-size: 3em;
overflow: hidden;
}
/*creating animation effect*/
a:hover {
color: #111;
background: #39ff14;
box-shadow: 0 0 50px #39ff14;
}
</style>
Código completo: en esta sección, combinaremos las dos secciones anteriores para crear un botón de luz de neón usando HTML y CSS.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
How to create Neon Light
Button using HTML and CSS?
</title>
<style>
/*styling background*/
body {
margin: 0;
padding: 0;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #000;
font-family: sans-serif;
}
/* styling the button*/
a {
padding: 20px 20px;
display: inline-block;
color: #008000;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
font-size: 3em;
overflow: hidden;
}
/*creating animation effect*/
a:hover {
color: #111;
background: #39ff14;
box-shadow: 0 0 50px #39ff14;
}
</style>
</head>
<body>
<a>GeeksForGeeks</a>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lakshgoel204 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA