Los botones son, sin duda, uno de los componentes más importantes de cualquier sitio web o aplicación. Un botón debe diseñarse de tal manera que sobresalga del otro componente para que el usuario tenga claro dónde hacer clic y para qué se utiliza el botón. Hay infinitas formas en las que se puede diseñar un botón. Veremos cómo crear un botón brillante. Es posible que todos hayan visto la luz moviéndose de un extremo a otro y cuando se refleja en alguna superficie brillante. Implementaremos lo mismo en el mouse-hover.
Enfoque: el enfoque es usar pseudoselectores antes y después de los selectores. Al usar antes, crearemos un tipo de efecto de franja y al usar después, nos aseguraremos de que se mueva hacia adelante y hacia atrás para darle un aspecto de reflejo que hace que nuestro botón se vea brillante.
Código HTML: En esta sección, hemos creado un botón.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Gradient Text</title> </head> <body> <button>GeeksForGeeks</button> </body> </html>
Código CSS: Para CSS, siga los pasos que se indican a continuación.
- Paso 1: primero haga un estilo básico del botón como un fondo y un radio de borde.
- Paso 2: ahora use la propiedad de sombra insertada para dar una sombra al interior del borde del botón.
- Paso 3: Ahora use antes del selector para crear una tira. El truco consiste en usar un ancho menor que el ancho real del botón y una altura igual a la altura real del botón. El uso de la función de sesgo es completamente opcional, puede omitir si lo desea. Lo hemos usado para tener una tira ligeramente sesgada.
- Paso 4: ahora usa el cursor para mover la tira hacia la izquierda.
- Paso 5: Repita los pasos 3 y 4 con el selector posterior, simplemente cambie el ancho a un valor negativo para mover la tira de regreso a su posición original.
Sugerencia: puede usar un poco de espacio entre líneas y longitud para dejar algo de espacio alrededor del texto del botón para que se vea más claro.
<style>
button {
position: absolute;
top: 40%;
left: 40%;
width: 200px;
height: 60px;
text-align: center;
background: black;
font-size: 24px;
color: white;
font-family: "Gill Sans", "Gill Sans MT",
Calibri, "Trebuchet MS", sans-serif;
border-radius: 60px;
border: 4px solid black;
box-shadow: inset 0 0 30px rgb(97, 96, 96);
}
button::before {
content: "";
position: absolute;
top: 0;
left: 10px;
width: 70%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transition: 0.5s;
transform: skewX(-15deg);
}
button:hover::before {
left: 190px;
}
button::after {
content: "";
position: absolute;
top: 0;
left: -70px;
width: 50px;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transition: 0.5s;
transform: skewX(-15deg);
}
button:hover::after {
left: 190px;
}
</style>
Código Completo: Es la combinación de las dos secciones anteriores del código.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Gradient Text</title>
</head>
<style>
button {
position: absolute;
top: 40%;
left: 40%;
width: 200px;
height: 60px;
text-align: center;
background: black;
font-size: 24px;
color: white;
font-family: "Gill Sans", "Gill Sans MT",
Calibri, "Trebuchet MS", sans-serif;
border-radius: 60px;
border: 4px solid black;
box-shadow: inset 0 0 30px rgb(97, 96, 96);
}
button::before {
content: "";
position: absolute;
top: 0;
left: 10px;
width: 70%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transition: 0.5s;
transform: skewX(-15deg);
}
button:hover::before {
left: 190px;
}
button::after {
content: "";
position: absolute;
top: 0;
left: -70px;
width: 50px;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transition: 0.5s;
transform: skewX(-15deg);
}
button:hover::after {
left: 190px;
}
</style>
<body>
<button>GeeksForGeeks</button>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA