Split Skewed Button Hover Animation using CSS

Last Updated : 18 May, 2023

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>