Split Skewed Button Hover Animation using CSS
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:
Last Updated :
18 May, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...