Site icon Coding is Love

Two sides sliding button background animation effect

Rajesh DN

Each time when I come up with new button background animation effect tutorial, it really excites me and creates an anxiety to share with you guys.  So in this article I’m going to explain you guys — how to create a Two sides sliding button background animation effect

If you guys have followed my previous articles, In one of my previous articles I have written a article about — Button background sliding animation effect  which is created using one slider, where as in this article I’m going to use two sliders to create an interesting Two sides sliding button background animation effect.

Two sides sliding button background animation effect :
 Here in this animation effect I’m using two sliders which are tilted to a certain angle. and getting tilted angle is quite interesting thing in this animation effect. It can be achieved by using CSS3 skew() method.

Come lets dive into some real coding

  1. Consider a div element with id:wrapper. inside this div element create two more div elements and give them a different classes – class:btn , class:btn1
  2. Now consider two span elements and one p element within two div elements, by giving each span with different classes. Here span elements are useful for creating sliders.
  3. Start adding CSS to the parent div element, by giving width, height, and margin. 
    #wrapper {
        width: 500px;
        height: auto;
        margin: 50px auto;
}
  4. Now add the CSS to two div elements inside parent div, same styling’s are given to two div elements by adding width, height, border, and give position:relative; so that we can move the sliders which are inside the div elements. 
    .btn, .btn1{
       width: 300px;
       height: auto;
       border: 3px solid #bb0000;
       padding: 20px;
       margin: 100px auto;
       text-align: center;
       text-transform: uppercase;
       font-weight: bold;
       position: relative;
       cursor: pointer;
       font-size: 24px;
       color: #bb0000;
       box-sizing: border-box;
}
  5. Give the p elements position:relative; and z-index:999; so that the text will be always above the sliders whenever hovered over the div elements. 
    .btn p, .btn1 p{
       position: relative;
       z-index: 999;
}
  6. Next give the div elements color:#fff; so that whenever hovered over it, text color turns into white. 
    .btn:hover, .btn1:hover  {
      color: #fff;
}
  7. Now add CSS to the top slider, by giving width, height, background-color and make its position:absolute; so that we can move the slider above the div element by giving top: -98px;. and for getting tilted effect we can add the transform: skewY(10deg); property. by giving negative valve transform: skewY(-10deg); we can tilt the slider in the opposite direction. 
    .btn .t-slider {
      width: 100%;
      background-color: #bb0000;
      height: 60px;
      position: absolute;
      top: -98px;
      left: 0px;
      transform: skewY(10deg);
      transition: all 0.7s;
}

  8. Now add CSS to the down slider, by giving width, height, background-color and make its position:absolute; so that we can move the slider below the div element by giving top: 98px;. and for getting tilted effect we can add the transform: skewY(10deg); property. by giving negative valve transform: skewY(-10deg); we can tilt the slider in the opposite direction. 
    .btn .d-slider {
       width: 100%;
       background-color: #bb0000;
       height: 68px;
       position: absolute;
       top: 98px;
       left: 0px;
       transform: skewY(10deg);
       transition: all 0.7s;
}

  9. Now add the hover effect to the div element, so that whenever hovered over the div element we can see the animation effect. 
    .btn:hover .t-slider {top: -30px;transition: all 0.7s;}
.btn:hover .d-slider {top: 29px;transition: all 0.7s;}

This is how Two sides sliding button background animation effect works without overflow:hidden; property

So now add the overflow property to the div elements

.btn, .btn1{overflow:hidden;}

Before I wrap this article, I want to make sure you guys know about few properties and methods, which I used in this article.

First Let me explain about skew() method

  1. skew() method which is used for tilting or skewing the elements and this method is used with the help of CSS3 transform property.
  2. skew() method tilts or skews the elements in two directions along x-axis and y-axis.
  3. transform: skew(); the value passed inside the skew() method should be in degrees.
  4. syntax for skew x-axis and skew y-axis methods
    x-axis transform:  skewX(10deg);
    y-axis — transform:  skewY(10deg);
  5. main syntax — transform: skew(10deg , 5deg);
    first value represents x direction
    second value represents y direction
  6. So here I made use of transform:skewY(); property to tilt the sliders.

Now let me explain with Example, how does overflow:hidden; property works I see many beginners get confuse with this property.

  1. Consider a div with class:btn and inside the div element add p and span elements. Now style the div element by adding the width:200px; padding:10px; and position:relative;
  2. Reason why I gave the position:relative; to the div element is to move the child elements(here child elements are p and span element) inside the div element. and to move the child elements we have to make the parents div element position:relative; and child elements(which you want to move) position:absolute; and finally by using top, left, bottom, and right properties we can move the child elements.
  3. Now style the span element by giving width, height, and background-color and give its position:absolute;
  4. See here I give top:40px; and left:0px; to the span element. so that the span element lies outside(below) the div element.
  5. Now see what happens when I give overflow:hidden; property to div element, span element gets hidden. but check the below image, by using developer tool we can see the span element clearly which is hidden. 
    .btn{overflow:hidden;}

  6. Now we can bring back the span element by using hover effect, so give the top:0px; to div element. 
    .btn:hover span{ top:0px;transition:all 0.5s; }

Hope so this article helps you guys to understand few concepts clearly. Here I wrap this article check out the Demo below.

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

Exit mobile version