24 Button Hover Animations

This tutorial explains how to add advanced hover animations in a few simple steps using CSS and JavaScript code.

Tools

Code editor

Estimated time

10 min.

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.

Something is not clear? Ask a question on community forums.