Button background sliding animation effect<\/a>\u00a0 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.<\/p>\nTwo sides sliding button background animation effect :
\n<\/strong> 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()<\/code> method.<\/p>\nCome lets dive into some real coding<\/h4>\n\n- Consider a div element with
id:wrapper<\/code>. inside this div element create two more div elements and give them a different classes – class:btn<\/code> , class:btn1<\/code>
\n![\"Two](\"http:\/\/imgh.us\/twoside1.jpg\")
<\/li>\n- Now consider two
span<\/code> elements and one p<\/code> element within two div elements, by giving each span<\/code> with different classes. Here span elements are useful for creating sliders.![\"Two](\"http:\/\/imgh.us\/twoside2.jpg\")
<\/li>\n- Start adding CSS to the parent div element, by giving width, height, and margin.\n
#wrapper {\n width: 500px;\n height: auto;\n margin: 50px auto;\n}<\/pre>\n<\/li>\n - 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;<\/code> so that we can move the sliders which are inside the div elements.\n.btn, .btn1{\n width: 300px;\n height: auto;\n border: 3px solid #bb0000;\n padding: 20px;\n margin: 100px auto;\n text-align: center;\n text-transform: uppercase;\n font-weight: bold;\n position: relative;\n cursor: pointer;\n font-size: 24px;\n color: #bb0000;\n box-sizing: border-box;\n}<\/pre>\n<\/li>\n- Give the
p<\/code> elements position:relative;<\/code> and z-index:999;<\/code> so that the text will be always above the sliders whenever hovered over the div elements.\n.btn p, .btn1 p{\n position: relative;\n z-index: 999;\n}\n<\/pre>\n<\/li>\n- Next give the div elements
color:#fff;<\/code> so that whenever hovered over it, text color turns into white.\n.btn:hover, .btn1:hover {\n color: #fff;\n}\n<\/pre>\n<\/li>\n- Now add CSS to the top slider<\/strong>, by giving width, height, background-color and make its
position:absolute;<\/code> so that we can move the slider above<\/strong> the div element by giving top: -98px;<\/code>. and for getting tilted effect we can add the transform: skewY(10deg);<\/code> property. by giving negative valve transform: skewY(-10deg);<\/code> we can tilt the slider in the opposite direction.\n.btn .t-slider {\n width: 100%;\n background-color: #bb0000;\n height: 60px;\n position: absolute;\n top: -98px;\n left: 0px;\n transform: skewY(10deg);\n transition: all 0.7s;\n}<\/pre>\n![\"Two](\"http:\/\/imgh.us\/twoside3.jpg\")
<\/li>\n
- Now add CSS to the down slider<\/strong>, by giving width, height, background-color and make its
position:absolute;<\/code> so that we can move the slider below<\/strong> the div element by giving top: 98px;<\/code>. and for getting tilted effect we can add the transform: skewY(10deg);<\/code> property. by giving negative valve transform: skewY(-10deg);<\/code> we can tilt the slider in the opposite direction.\n.btn .d-slider {\n width: 100%;\n background-color: #bb0000;\n height: 68px;\n position: absolute;\n top: 98px;\n left: 0px;\n transform: skewY(10deg);\n transition: all 0.7s;\n}\n<\/pre>\n![\"Two](\"http:\/\/imgh.us\/twoside4.jpg\")
<\/li>\n
- Now add the hover effect to the div element, so that whenever hovered over the div element we can see the animation effect.\n
.btn:hover .t-slider {top: -30px;transition: all 0.7s;}\n.btn:hover .d-slider {top: 29px;transition: all 0.7s;}\n<\/pre>\n<\/li>\n<\/ol>\nThis is how Two sides sliding button background animation effect works without overflow:hidden;<\/code> property<\/h4>\n![\"Two](\"http:\/\/imgh.us\/ezgif.com-gif-maker_15.gif\")
<\/p>\n
So now add the overflow property to the div elements<\/p>\n
.btn, .btn1{overflow:hidden;}<\/pre>\nBefore I wrap this article, I want to make sure you guys know about few properties and methods, which I used in this article.<\/p>\n
First Let me explain about skew()<\/code> method<\/h4>\n\n- skew()<\/strong> method which is used for tilting or skewing the elements and this method is used with the help of CSS3
transform<\/code> property.<\/li>\n- skew()<\/strong> method tilts or skews the elements in two directions along x-axis and y-axis.<\/li>\n
transform: skew();<\/code> the value passed inside the skew()<\/strong> method should be in degrees.<\/li>\n- syntax<\/strong> for skew x-axis and skew y-axis methods
\nx-axis transform:\u00a0 skewX(10deg);
\ny-axis — transform:\u00a0 skewY(10deg);<\/li>\n- main syntax<\/strong> —
transform: skew(10deg , 5deg);<\/code>
\nfirst value represents x direction
\nsecond value represents y direction<\/li>\n- So here I made use of
transform:skewY();<\/code> property to tilt the sliders.<\/li>\n<\/ol>\nNow let me explain with\u00a0Example, <\/strong>how does overflow:hidden;<\/code> property works I see many beginners get confuse with this property.<\/h4>\n\n- Consider a div with
class:btn<\/code> and inside the div element add p<\/code> and span<\/code> elements. Now style the div element by adding the width:200px;<\/code> padding:10px;<\/code> and position:relative;<\/code><\/li>\n- Reason why I gave the
position:relative;<\/code> 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;<\/code> and child elements(which you want to move) position:absolute;<\/code> and finally by using top, left, bottom, and right properties we can move the child elements.<\/li>\n- Now style the
span<\/code> element by giving width, height, and background-color and give its position:absolute;<\/code><\/li>\n- See here I give
top:40px;<\/code> and left:0px;<\/code> to the span element. so that the span element lies outside(below) the div element.
\n![](\"http:\/\/imgh.us\/Capture1_108.png\")
<\/li>\n- Now see what happens when I give
overflow:hidden;<\/code> 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.\n.btn{overflow:hidden;}<\/pre>\n![\"\"](\"http:\/\/imgh.us\/Capture_5457.png\")
<\/li>\n
- Now we can bring back the span element by using hover effect, so give the
top:0px;<\/code> to div element.\n.btn:hover span{ top:0px;transition:all 0.5s; }<\/pre>\n![](\"http:\/\/imgh.us\/JRGLsj4K0R.gif\")
<\/li>\n<\/ol>\n
Hope so this article helps you guys to understand few concepts clearly. Here I wrap this article check out the Demo below.
\n
\nSee the Pen Two sides sliding button background animation effects by rajeshdn (@cool_lazyboy) on CodePen.<\/p>\n<\/p>\n
![\"Two](\"https:\/\/imgh.us\/ezgif.com-gif-maker_14.gif\")
<\/p>\n