About this:
This is a subtle button animation to make the backgroud slide on hover.
Watch my backgroundCreating the Button
Add a button to your page and give it a class. In this case we’ll be using the class “btn-slide”. In this case the style “Outline” is used.
Custom CSS
Paste CSS in Flatsome advanced > Custom CSS or in Customizer > Style > Custom CSS.
You can change the color of the slide and text on hover where the comment is added.
/** BTN SLIDE **/
.btn-slide {
display: block;
position: relative;
transition: all 1s cubic-bezier(0.42, 0, 0.58, 1);
padding: 5px 15px;
}
.btn-slide {
border: none;
z-index: 1;
}
.btn-slide:after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
right: 0;
z-index: -1;
background-color: #28bccd; /** CHANGE THIS FOR SLIDE COLOR **/
transition: all 0.3s ease;
}
.btn-slide:hover {
color: #fff; /** CHANGE THIS FOR TEXT COLOR ON HOVER **/
}
.btn-slide:hover:after {
left: 0;
width: 100%;
}
.btn-slide:active {
top: 2px;
}
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.