El efecto de cambio de color de un botón es muy común, pero vamos a hacer una versión ligeramente avanzada de este efecto. El fondo cambiará como un efecto de clip girando en un ángulo particular.
Enfoque: El enfoque consiste en proporcionar dos o tres de fondo y luego rotarlos en diferentes ángulos.
Código HTML: En esta sección, usaremos código HTML para diseñar la estructura del cuerpo.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Button effect</title> </head> <body> <a href="#">GeeksforGeeks</a> </body> </html>
Código CSS: En esta sección, seguiremos algunos pasos para diseñar el efecto del botón.
- Paso 1: Primero, establecemos la posición del botón y luego usamos la propiedad de decoración de texto para eliminar el subrayado del enlace. Además, establezca el ancho, la altura, el color y el color de fondo de un botón.
- Paso 2: Aquí aplicamos el segundo fondo con rotación usando el selector anterior . Hemos usado el índice z para mostrar este fondo en la parte superior de otro.
- Paso 3: ahora, aplique el fondo final con un grado diferente de rotación utilizando la selección anidada tanto del cursor como del selector anterior .
Consejo: puede cambiar el grado de rotación para cambiar el efecto un poco según sus necesidades.
A continuación se muestra la implementación de los tres pasos anteriores.
<style>
body {
padding: 0;
margin: 0;
}
a {
position: absolute;
top: 40%;
left: 40%;
transform: translate(-50%, -50%);
width: 180px;
height: 60px;
color: white;
text-decoration: none;
text-align: center;
padding-top: 30px;
font-size: 20px;
overflow: hidden;
background: green;
}
a::before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
bottom: 0;
border-style: solid;
border-color: #f00;
border-width: 80px 100px;
z-index: -1;
transform: rotate(360deg);
transition: 1s;
transform-origin: left;
}
a:hover::before {
border-color: #00f;
transform: rotate(60deg);
}
</style>
Código completo: en esta sección, combinaremos lo anterior con la sección para crear un efecto de cambio de color en el botón usando HTML y CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Button effect</title>
<style>
body {
padding: 0;
margin: 0;
}
a {
position: absolute;
top: 40%;
left: 40%;
transform: translate(-50%, -50%);
width: 180px;
height: 60px;
color: white;
text-decoration: none;
text-align: center;
padding-top: 30px;
font-size: 20px;
overflow: hidden;
background: green;
}
a::before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
bottom: 0;
border-style: solid;
border-color: #f00;
border-width: 80px 100px;
z-index: -1;
transform: rotate(360deg);
transition: 1s;
transform-origin: left;
}
a:hover::before {
border-color: #00f;
transform: rotate(60deg);
}
</style>
</head>
<body>
<a href="#">GeeksforGeeks</a>
</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