Button background sliding animation effect using HTML and CSS

button background sliding animation effect

Today in this tutorial I’m going to explain you guys, how to create an amazing  Button background sliding animation effect  which is quite interesting animation effect and this is the animation effect, which everyone wants to learn.

So Let’s start the tutorial step by step

  1. Consider a div element with class:btn and add a para and span elements inside div element with class:slider and give a required width, height and add line-height property to div element so that the text lies exactly center of the div.
    button background sliding animation effect

    .btn {
              width: 180px;
              height: 44px;
              border: 1px solid #fff;
              margin: 50px auto;
              line-height: 45px;
              text-align: center;
              text-transform: uppercase;
              color: #fff;
              font-weight: bold;
              font-size: 16px;
              position: relative;
              cursor: pointer;
              border-radius: 1px;
              transition: all 0.7s;
    }


  2. Now lets style span element of class:slider with width, height and give position:absolute; for adjusting the slider by using top, left properties and give z-index:0; so that slider lies below the content and add transform: skew(-40deg); and transition: all 0.7s; for smooth transition animation effect on hover.
    .btn .slider {
              width: 205px;
              height: 45px;
              background-color: #fff;
              position: absolute;
              top: 0px;
              left: -225px;
              z-index: 0;
              transform: skew(-40deg);
             -webkit-transform: skew(-40deg);
             -moz-transform: skew(-40deg);
             -o-transform: skew(-40deg);
             -ms-transform: skew(-40deg);
              transition: all 0.7s;
    }
    
  3. Add the css to para element by giving z-index: 1;property so that the content lies always over the slider on hover and add the hover effect to the div element.btn:hover so that the text color change on hover.
    .btn p {
            position: relative;
            z-index: 1;
    }
        .btn:hover {
            color: #49b293;
    }
    
    
    
    
  4. Add transform: translateX(215px); property to div element .btn:hover .slider so that when ever we hover on the div element we can see the background sliding animation effect. and by giving overflow:hidden; property to the div element,  its hide the  background slider.
    button background sliding animation effect

    .btn:hover .slider {
            transform: translateX(215px);
    }
         .btn{
            overflow:hidden;
    }
    

Check out the youtube video on Button Hover effect

Check this Demo for more Button background sliding animation effect examples




See the Pen background sliding animation button by rajeshdn (@cool_lazyboy) on CodePen.0


Author: Rajesh DN

Rajesh Dn is a UI developer at TCS. he likes exploring new technologies and likes hanging with friends and surfing youtube in his spare time.

Leave a Reply

Your email address will not be published. Required fields are marked *