El efecto de animación de desplazamiento de botón sesgado dividido se puede crear utilizando las pseudoclases antes y después en CSS. Al pasar el cursor, cambie la asimetría e intercambie las posiciones de antes y después de la pseudoclase.
Pasos:
- Cree un archivo HTML llamado index.html.
- Cree un elemento div para el botón.
- Añade estilos al botón.
- Tanto en la pseudoclase anterior como posterior del botón, establezca el color de fondo del botón y establezca el ancho en 50%, y transforme ambos para que estén sesgados por algún ángulo.
- En la pseudoclase anterior del botón, establezca la posición superior sobre la posición superior del botón.
- En la pseudoclase posterior del botón, establezca la posición superior debajo de la posición superior del botón y establezca la posición izquierda en el 50 % del ancho del botón.
- Al pasar el mouse, establezca la posición superior de ambas pseudoclases en 0 y cambie la asimetría a 0 grados.
Código:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
padding: 0;
margin: 0;
}
.container {
position: fixed;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
}
.btn {
position: relative;
letter-spacing: 0.25em;
font-size: 30px;
height: 60px;
/* To center the text vertically */
display: flex;
align-items: center;
cursor: pointer;
}
.btn::after,
.btn::before {
content: "";
position: absolute;
height: 100%;
width: 50%;
transform: skewX(30deg);
background: transparent;
transition: all 0.7s cubic-bezier(0.7, -0.5, 0.25, 1.5);
z-index: -1;
}
.btn::before {
top: -40%;
left: 0;
background-color: navajowhite;
}
.btn::after {
top: 40%;
left: 50%;
background-color: greenyellow;
}
.btn:hover::before {
top: 0;
left: 50%;
transform: skewX(0deg);
}
.btn:hover::after {
top: 0;
left: 0;
transform: skewX(0deg);
}
</style>
</head>
<body>
<div class="container">
<div class="btn">GeeksforGeeks</div>
</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