About this:

This is a subtle button animation to make the backgroud slide on hover.

Watch my background

Creating 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

Get in touch

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.