Skip to content
Related Articles

Related Articles

Split Skewed Button Hover Animation using CSS
  • Last Updated : 22 Feb, 2021

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 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.

Code:

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:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :