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" >w3wiki</ div > </ div > </ body > </ html > |
Output: