Split Skewed Button Hover Animation effect can be created using the before and after pseudo-classes in CSS. On hovering change skewness and swap the positions of before and after pseudo-class.
Steps:
- Create an HTML file named index.html.
- Create a div element for the button.
- Add styles to the button.
- On both the before and after pseudo-class of the button, set the background color of the button and set the width as 50%, and transform both to be skewed by some angle.
- On the before pseudo-class of the button, set the top position above the top position of the button.
- On the after pseudo-class of the button, set the top position below the top position of the button and set the left position to 50% of the button width.
- On hovering, Set the top position of both pseudo-class to 0 and change the skewness to 0 deg.
Example: In this example, we are implementing the above steps.
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>
|
Output: