Se puede crear un botón de neón brillante y resplandeciente usando CSS puro con el efecto de sombra . Estos botones se pueden usar para dar un buen contraste en fondos o temas oscuros. Da un aspecto minimalista y atrae la atención del usuario. Se deben seguir los pasos a continuación para crear este efecto.
Sección HTML: Esta sección contiene el código HTML necesario para mostrar los botones. Los botones se crean con el elemento div y se les asigna una clase que crearemos más adelante.
HTML
<!DOCTYPE html> <html> <body> <div class="button button_1"> BUTTON 1 </div> <div class="button button_2"> BUTTON 2 </div> </body> </html>
Sección CSS: Esta sección contiene el código para agregar el efecto a los botones.
La propiedad box-shadow se usa para agregar un conjunto de colores a la sombra con el valor de inserción. Los botones se redondean usando la propiedad border-radius y se alinean correctamente usando la propiedad izquierda .
CSS
/* Set the background color of
all the elements */
* {
background-color: black;
}
.button {
/* Change the shape of the button */
height: 35px;
width: 100px;
border-radius: 20%;
/* Position the buttons */
position: fixed;
top: 48vh;
/* Center the name of the button */
display: flex;
align-items: center;
justify-content: center;
}
.button_1 {
/* Position the button */
left: 35vw;
/* Add the shadow effect for the button */
box-shadow: inset 0 0 18px #fff,
inset -6px 0 18px #f3bad6,
inset 6px 0 18px #0ff,
inset -6px 0 30px #f3bad6,
inset 6px 0 30px #0ff,
0 0 18px #fff, 4px 0 18px
#f3bad6, -4px 0 18px #0ff;
}
.button_2 {
/* Position the button */
left: 55vw;
/* Add the shadow effect for the button */
box-shadow: inset 0 0 18px #fff,
inset 6px 0 18px #f3bad6,
inset -6px 0 18px #0ff,
inset 6px 0 30px #f3bad6,
inset -6px 0 30px #0ff,
0 0 18px #fff, -4px 0 18px
#f3bad6, 4px 0 18px #0ff;
}
Código Completo: Es la combinación de las dos secciones anteriores del código.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the background color of all the elements */
*{
background-color: black;
}
.button {
/* Change the shape of the button */
height: 35px;
width: 100px;
border-radius: 20%;
/* Position the buttons */
position: fixed;
top: 48vh;
/* Center the name of the button */
display: flex;
align-items: center;
justify-content: center;
}
.button_1 {
/* Position the button */
left: 35vw;
/* Add the shadow effect for the button */
box-shadow: inset 0 0 18px #fff,
inset -6px 0 18px #f3bad6,
inset 6px 0 18px #0ff,
inset -6px 0 30px #f3bad6,
inset 6px 0 30px #0ff,
0 0 18px #fff, 4px 0 18px #f3bad6,
-4px 0 18px #0ff;
}
.button_2 {
/* Position the button */
left:55vw;
/* Add the shadow effect for the button */
box-shadow: inset 0 0 18px #fff,
inset 6px 0 18px #f3bad6,
inset -6px 0 18px #0ff,
inset 6px 0 30px #f3bad6,
inset -6px 0 30px #0ff,
0 0 18px #fff, -4px 0 18px #f3bad6,
4px 0 18px #0ff;
}
</style>
</head>
<body>
<div class="button button_1">
BUTTON 1
</div>
<div class="button button_2">
BUTTON 2
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por vivshubham y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA