About this:
Rotating an element with pure CSS on a loop. When familiar with custom CSS you can use these keyframes for just about any element.
Custom CSS
.button-left, .button-right{
padding:6px 0;
width:50%;
}
.button-left{
border-radius: 6px;
position:absolute;
top:0;
left:0;
z-index:0;
transition: width 0.6s ease-in-out, left 0.6s ease-in-out, z-index 0.6s;
}
.button-right{
padding:6px 0;
position:absolute;
top:0;
left:50%;
width:52%;
margin-left:-2%;
transition: width 0.6s ease-in-out, left 0.6s ease-in-out;
}
.button-right:hover{
transition: width 0.6s, left 0.6s;
left:2%;
width:100%;
z-index:100!important;
}
.button-left:hover{
transition: width 0.6s, left 0.6s;
left:0%;
width:100%;
z-index:100!important;
}Notes
Free for use, copy and edit
Stay Connected
Flatsome is the perfect theme for your shop, company websites or client websites. It has all the tools needed to create super fast responsive websites with amazing user experience.
Starting a project?
Looking to start a website project for a new Flatsome website or webshop? Already got a Flatsome site but looking to redesign it?
Got a question?
Want to ask a question of request more information on what we do within Flatsome? Shoot us a message or feedback.