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.
- Create an HTML file named index.html.
- Create a div element for the button.
- Add styles to the button.
- On both 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 be 50% of the button width.
- On hovering, Set the top position of both pseudo-class to 0 and change the skewness to 0 deg.
My Personal Notes arrow_drop_up