Open In App

Split Skewed Button Hover Animation using CSS

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads