24 Button Hover Animations

Basic plugin configuration

The hover transition duration should be 0 sec. 

Go to Plugin Settings ➝ Desing ➝ Colors ➝ Transition and set duration to 0.

Adding basic CSS code

1. Copy CSS code below, go to Tools ➝ Code Editor ➝ CSS and paste it.

body:not(.gridbox) .btn-hover-effect .ba-btn-transition {
 overflow: hidden;
 position: relative;
 transition: background .0s ease-in-out;
}
 
body:not(.gridbox) .btn-hover-effect .ba-btn-transition > i,
body:not(.gridbox) .btn-hover-effect .ba-btn-transition > span {
 z-index: 5
}
 
body:not(.gridbox) .btn-hover-effect .ba-btn-transition:before,
body:not(.gridbox) .btn-hover-effect .ba-btn-transition:after {
 border-radius: inherit;
 bottom: 0;
 content: "";
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
 transition: .3s;
}
 
body:not(.gridbox) .btn-hover-effect .ba-btn-transition:before {
 background: var(--button-background-color);
 z-index: 1;
}
 
body:not(.gridbox) .btn-hover-effect .ba-btn-transition:after {
 background: var(--button-background-hover);
 z-index: 2;
}

Adding basic JavaScript code

2. Copy JavaScript code below, go to Tools ➝ Code Editor ➝ JavaScript and paste it.

document.addEventListener('DOMContentLoaded', () => {
    jQuery('.btn-hover-effect a').each(function(){
        let style = getComputedStyle(this),
            borderRadius = style.borderRadius,
            color = style.backgroundColor;
        this.style.setProperty('--button-background-color', color);
        this.style.setProperty('--button-border-radius', borderRadius);
    }).on('mouseenter', function(){
        let color = getComputedStyle(this).backgroundColor;
        console.info(color)
        this.style.setProperty('--button-background-hover', color);
    });
});

Adding CSS class suffix

3. Copy CSS class suffix from the demo, go to Item Settings ➝ General ➝ Advanced ➝ Class Suffix and paste it.

Adding CSS

4. Copy CSS from the demo, go to Tools ➝ Code Editor ➝ CSS and paste it.