27 Awesome CSS Hover Effects For Gridbox Plugin Button

27 Awesome CSS Hover Effects For Gridbox Plugin Button

Today we want to share tips & tricks with you on how to add awesome CSS hover effects to the Gridbox plugin “Button”. So, meet the huge collection of 27 different CSS Hover Effects for Joomla Website Builder Gridbox. CSS Hover Effect will add dynamics to your website buttons and will be a great end to call to action. Hover Effect is a particular design trick that never fails to catch the visitor's eye! So if you are looking for cool ideas for implementation on your sites, then in this collection you will probably find something for yourself.


View Demo


Step 1: Copy CSS Code.

Copy CSS code and paste to the Gridbox Code Editor.


Gridbox CSS Editor


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;
}

Step 2: Copy JavaScript Code.

Copy JavaScript code and paste to the Gridbox Code Editor.


Javascript CSS Editor


jQuery(document).on('ready', function(){
 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;
        this.style.setProperty('--button-background-hover', color);
    });
});

Step 3: Copy Hover Effect.

Copy the CSS code and class suffix of the effect you like. Class Suffix should be placed to the field "Class Suffix" of the plugin Button. CSS code of the hover effect should be placed to the Gridbox Code Editor.


Class Suffix of the Button plugin


Class Suffix: btn-hover-effect hover-1

.btn-hover-effect.hover-1 .ba-btn-transition:after {
    opacity: 0;
}

@keyframes hover-1 {
    50% {
        opacity: 1;
    }
}

body:not(.gridbox) .btn-hover-effect.hover-1 .ba-btn-transition:hover:after {
    animation: hover-1  1s .25s linear infinite;
    opacity: 0;
}


Class Suffix: btn-hover-effect hover-2

body:not(.gridbox) .btn-hover-effect.hover-2 .ba-btn-transition:after {
    transform: scale(0);
}

body:not(.gridbox) .btn-hover-effect.hover-2 .ba-btn-transition:hover:after {
    transform: scale(1);
}

@keyframes hover-2 {
    0% {box-shadow: 0 0px 0px 0px var(--button-background-hover);}
    50% {box-shadow: 0 0px 0px 10px var(--button-background-hover);}
    100% {box-shadow: 0 0px 0px 0px var(--button-background-hover);}
}

body:not(.gridbox) .btn-hover-effect.hover-2 .ba-btn-transition:hover {
    animation: hover-2 1s .25s linear infinite;
}

body:not(.gridbox) .btn-hover-effect.hover-2 .ba-btn-transition:before {
    transition-delay: .3s;    
}

body:not(.gridbox) .btn-hover-effect.hover-2 .ba-btn-transition:hover:before {
    opacity: 0;
}


Class Suffix: btn-hover-effect hover-3

body:not(.gridbox) .btn-hover-effect.hover-3 .ba-btn-transition {
    overflow: visible;
}

body:not(.gridbox) .btn-hover-effect.hover-3 .ba-btn-transition:after {
    opacity: 0;
}

body:not(.gridbox) .btn-hover-effect.hover-3 .ba-btn-transition:hover:after {
    opacity: 1;
}

@keyframes pulse {
    to {
        opacity: 0;
        transform: scale(1.2);
    }
}

body:not(.gridbox) .btn-hover-effect.hover-3 .ba-btn-transition:hover:before {
    animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    background: var(--button-background-hover);

}


Class Suffix: btn-hover-effect hover-4

@-webkit-keyframes hover-4 {
    from, 11.1%, to {transform: none;}
    22.2% {transform: skewX(-12.5deg) skewY(-12.5deg);}
    33.3% {transform: skewX(6.25deg) skewY(6.25deg);}
    44.4% {transform: skewX(-3.125deg) skewY(-3.125deg);}
    55.5% {transform: skewX(1.5625deg) skewY(1.5625deg);}
    66.6% {transform: skewX(-0.78125deg) skewY(-0.78125deg);}
    77.7% {transform: skewX(0.390625deg) skewY(0.390625deg);}
    88.8% {transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}
}

body:not(.gridbox) .btn-hover-effect.hover-4 .ba-btn-transition:hover {
    animation: hover-4 .7s both;
}

body:not(.gridbox) .btn-hover-effect.hover-4 .ba-btn-transition:after {
    opacity: 0;
}

body:not(.gridbox) .btn-hover-effect.hover-4 .ba-btn-transition:hover:after {
    opacity: 1;
}


Class Suffix: btn-hover-effect hover-5

body:not(.gridbox) .btn-hover-effect.hover-5 .ba-btn-transition {
    overflow: visible;
}

body:not(.gridbox) .btn-hover-effect.hover-5 .ba-btn-transition:after {
    opacity: 0;
}

body:not(.gridbox) .btn-hover-effect.hover-5 .ba-btn-transition:hover:after {
    opacity: 1;
}

@keyframes pulse {
    to {
        opacity: 0;
        transform: scale(1.2);
    }
}

body:not(.gridbox) .btn-hover-effect.hover-5 .ba-btn-transition:hover:before {
    animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    background: var(--button-background-hover);

}

body:not(.gridbox) .btn-hover-effect.hover-5 .ba-btn-transition > span:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
}

body:not(.gridbox) .btn-hover-effect.hover-5 .ba-btn-transition:hover > span:after {
    animation: pulse 1.25s .3s infinite cubic-bezier(0.66, 0, 0, 1);
    background: var(--button-background-hover);   
    border-radius: var(--button-border-radius);
}


Class Suffix: btn-hover-effect hover-6

body:not(.gridbox) .btn-hover-effect.hover-6 .ba-btn-transition:after {
    transform: translateY(-100%);
}

body:not(.gridbox) .btn-hover-effect.hover-6 .ba-btn-transition:hover:after {
    transform: translateY(0);
}

@keyframes hover-6 {
    0% {transform: translateY(0);}
    25% {transform: translateY(100%);opacity: 0;}
    26% {transform: translateY(-100%);opacity: 0;}
    100% {transform: translateY(0);}
}

body:not(.gridbox) .btn-hover-effect.hover-6 .ba-btn-transition:hover span {
    animation: hover-6 .5s linear both;
}


Class Suffix: btn-hover-effect hover-7

body:not(.gridbox) .btn-hover-effect.hover-7 .ba-
btn-transition:after {
    transform: translateX(-100%);
}

body:not(.gridbox) .btn-hover-effect.hover-7 .ba-btn-transition:hover:after {
    transform: translateX(0);
}

@keyframes hover-7 {
    0% {transform: translateY(0);}
    25% {transform: translateX(100%);opacity: 0;}
    26% {transform: translateX(-100%);opacity: 0;}
    100% {transform: translateY(0);}
}

body:not(.gridbox) .btn-hover-effect.hover-7 .ba-btn-transition:hover span {
    animation: hover-7 .5s linear both;
}


Class Suffix: btn-hover-effect hover-8

body:not(.gridbox) .btn-hover-effect.hover-8 .ba-btn-transition:after {
    transform: translateX(100%);
}

body:not(.gridbox) .btn-hover-effect.hover-8 .ba-btn-transition:hover:after {
    transform: translateX(0);
}

@keyframes hover-8 {
    0% {transform: translateY(0);}
    25% {transform: translateX(-100%);opacity: 0;}
    26% {transform: translateX(100%);opacity: 0;}
    100% {transform: translateY(0);}
}

body:not(.gridbox) .btn-hover-effect.hover-8 .ba-btn-transition:hover span {
    animation: hover-8 .5s linear both;
}


Class Suffix: btn-hover-effect hover-9

body:not(.gridbox) .btn-hover-effect.hover-9 .ba-btn-transition:after {
    transform: translateY(100%);
}

body:not(.gridbox) .btn-hover-effect.hover-9 .ba-btn-transition:hover:after {
    transform: translateY(0);
}

@keyframes hover-9 {
    0% {transform: translateY(0);}
    25% {transform: translateY(-100%);opacity: 0;}
    26% {transform: translateY(100%);opacity: 0;}
    100% {transform: translateY(0);}
}

body:not(.gridbox) .btn-hover-effect.hover-9 .ba-btn-transition:hover span {
    animation: hover-9 .5s linear both;
}


Class Suffix: btn-hover-effect hover-10

body:not(.gridbox) .btn-hover-effect.hover-10 .ba-btn-transition:after {
    border-radius: 0;
    z-index: 1;
}

body:not(.gridbox) .btn-hover-effect.hover-10 .ba-btn-transition:before {
    border-radius: 0;
    transform: scaleY(1);
    z-index: 2;
}

body:not(.gridbox) .btn-hover-effect.hover-10 .ba-btn-transition:hover:before {
    transform: scaleY(0);
}


Class Suffix: btn-hover-effect hover-11

body:not(.gridbox) .btn-hover-effect.hover-11 .ba-btn-transition:after {
    transform: scale(0);
}

body:not(.gridbox) .btn-hover-effect.hover-11 .ba-btn-transition:hover:after {
    transform: scale(1);
}


Class Suffix: btn-hover-effect hover-12

body:not(.gridbox) .btn-hover-effect.hover-12 .ba-btn-transition:after {
    z-index: 1;
}

body:not(.gridbox) .btn-hover-effect.hover-12 .ba-btn-transition:before {
    transform: scale(1);
    z-index: 2;
}

body:not(.gridbox) .btn-hover-effect.hover-12 .ba-btn-transition:hover:before {
    transform: scale(0);
}


Class Suffix: btn-hover-effect hover-13

body:not(.gridbox) .btn-hover-effect.hover-13 .ba-btn-transition:after {
    border-radius: 0;
    z-index: 1;
}

body:not(.gridbox) .btn-hover-effect.hover-13 .ba-btn-transition:before {
    border-radius: 0;
    transform: scaleX(1);
    z-index: 2;
}

body:not(.gridbox) .btn-hover-effect.hover-13 .ba-btn-transition:hover:before {
    transform: scaleX(0);
}


Class Suffix: btn-hover-effect hover-14

body:not(.gridbox) .btn-hover-effect.hover-14 .ba-btn-transition:after {
    border-radius: 0;
    transform: scaleX(0);
}

body:not(.gridbox) .btn-hover-effect.hover-14 .ba-btn-transition:hover:after {
    transform: scaleX(1);
}


Class Suffix: btn-hover-effect hover-15

body:not(.gridbox) .btn-hover-effect.hover-15 .ba-btn-transition:after {
    border-radius: 0;
    transform: scaleY(0);
}

body:not(.gridbox) .btn-hover-effect.hover-15 .ba-btn-transition:hover:after {
    transform: scaleY(1);
}


Class Suffix: btn-hover-effect hover-16

body:not(.gridbox) .btn-hover-effect.hover-16 .ba-button-wrapper {
    perspective: 100px;
}

body:not(.gridbox) .btn-hover-effect.hover-16 .ba-btn-transition {
    transition: all .3s, background .0s ease-in-out;   
}

body:not(.gridbox) .btn-hover-effect.hover-16 .ba-btn-transition:hover {
    overflow: visible;
    transform: skewX(20deg);
    backface-visibility: hidden;
}

body:not(.gridbox) .btn-hover-effect.hover-16 .ba-btn-transition:after {
    opacity: 0;
}

body:not(.gridbox) .btn-hover-effect.hover-16 .ba-btn-transition:hover:after {
    opacity: 1;
}


Class Suffix: btn-hover-effect hover-17

body:not(.gridbox) .btn-hover-effect.hover-17 .ba-button-wrapper {
    perspective:
100px;
}

body:not(.gridbox) .btn-hover-effect.hover-17 .ba-btn-transition {
    transition: all .3s, background .0s ease-in-out;   
}

body:not(.gridbox) .btn-hover-effect.hover-17 .ba-btn-transition:hover {
    overflow: visible;
    transform: skewX(-20deg);
    backface-visibility: hidden;
}

body:not(.gridbox) .btn-hover-effect.hover-17 .ba-btn-transition:after {
    opacity: 0;
}

body:not(.gridbox) .btn-hover-effect.hover-17 .ba-btn-transition:hover:after {
    opacity: 1;
}


Class Suffix: btn-hover-effect hover-18

body:not(.gridbox) .btn-hover-effect.hover-18 .ba-button-wrapper {
    perspective: 100px;
}

body:not(.gridbox) .btn-hover-effect.hover-18 .ba-btn-transition {
    transition: all .3s, background .0s ease-in-out;   
}

body:not(.gridbox) .btn-hover-effect.hover-18 .ba-btn-transition:hover {
    overflow: visible;
    transform: rotateX(15deg);
    perspective: 100px;
    backface-visibility: hidden;
}

body:not(.gridbox) .btn-hover-effect.hover-18 .ba-btn-transition:after {
    box-shadow: 0 0 0 0 var(--button-background-hover);
    opacity: 0;
}

body:not(.gridbox) .btn-hover-effect.hover-18 .ba-btn-transition:hover:after {
    box-shadow: 0 10px 30px -10px var(--button-background-hover);
    opacity: 1;
}


Class Suffix: btn-hover-effect hover-19

body:not(.gridbox) .btn-hover-effect.hover-19 .ba-button-wrapper {
    perspective: 100px;
}

body:not(.gridbox) .btn-hover-effect.hover-19 .ba-btn-transition {
    transition: all .3s, background .0s ease-in-out;   
}

body:not(.gridbox) .btn-hover-effect.hover-19 .ba-btn-transition:hover {
    overflow: visible;
    transform: rotateX(-15deg);
    perspective: 100px;
    backface-visibility: hidden;
}

body:not(.gridbox) .btn-hover-effect.hover-19 .ba-btn-transition:after {
    box-shadow: 0 0 0 0 var(--button-background-hover);
    opacity: 0;
}

body:not(.gridbox) .btn-hover-effect.hover-19 .ba-btn-transition:hover:after {
    box-shadow: 0 -10px 30px -10px var(--button-background-hover);
    opacity: 1;
}


Class Suffix: btn-hover-effect hover-20

body:not(.gridbox) .btn-hover-effect.hover-20 .ba-btn-transition {
    transition: all .3s, background .0s ease-in-out;   
}

body:not(.gridbox) .btn-hover-effect.hover-20 .ba-btn-transition:hover {
    overflow: visible;
    transform: translateY(-5px);
}

body:not(.gridbox) .btn-hover-effect.hover-20 .ba-btn-transition:after {
    box-shadow: 0 0 0 0 var(--button-background-hover);
    opacity: 0;
}

body:not(.gridbox) .btn-hover-effect.hover-20 .ba-btn-transition:hover:after {
    box-shadow: 0 10px 30px -10px var(--button-background-hover);
    opacity: 1;
}


Class Suffix: btn-hover-effect hover-21

body:not(.gridbox) .btn-hover-effect.hover-21 .ba-btn-transition {
    perspective: 100px;
}

body:not(.gridbox) .btn-hover-effect.hover-21 .ba-btn-transition span {
    transition: .5s;
    transform: rotateX(0deg);
}

body:not(.gridbox) .btn-hover-effect.hover-21 .ba-btn-transition:hover span {
    transform: rotateX(360deg);
}

body:not(.gridbox) .btn-hover-effect.hover-21 .ba-btn-transition:after {
    opacity: 0;
}

body:not(.gridbox) .btn-hover-effect.hover-21 .ba-btn-transition:hover:after {
    opacity: 1;
}


Class Suffix: btn-hover-effect hover-22

body:not(.gridbox) .btn-hover-effect.hover-22 .ba-btn-transition {
    transition: all .7s, background .0s ease-in-out; 
    perspective: 100px;  
}

body:not(.gridbox) .btn-hover-effect.hover-22 .ba-btn-transition:hover {
    backface-visibility: hidden;
    overflow: visible;
}

body:not(.gridbox) .btn-hover-effect.hover-22 .ba-btn-transition:after {
    opacity: 0;
}

body:not(.gridbox) .btn-hover-effect.hover-22 .ba-btn-transition:hover:after {
    opacity: 1;
    transform: rotateX(180deg);
}


Class Suffix: btn-hover-effect hover-23

body:not(.gridbox) .btn-hover-effect.hover-23 .ba-btn-transition span {
    letter-spacing:  0px !important;
    transition: .3s;
}

body:not(.gridbox) .btn-hover-effect.hover-23 .ba-btn-transition:hover span {
    letter-spacing: 4px !important;
}

body:not(.gridbox) .btn-hover-effect.hover-23 .ba-btn-transition:after {
    opacity: 0;
}

body:not(.gridbox) .btn-hover-effect.hover-23 .ba-btn-transition:hover:after {
    opacity: 1;
}


Class Suffix: btn-hover-effect hover-24

body:not(.gridbox
) .btn-hover-effect.hover-24 .ba-btn-transition:hover {
    background: var(--button-background-color) !important;
}

body:not(.gridbox) .btn-hover-effect.hover-24 .ba-btn-transition i {   
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(100%);
    transition: .3s;
    width: 100%;
}

body:not(.gridbox) .btn-hover-effect.hover-24 .ba-btn-transition:hover i {
    transform: translateY(0);   
}

body:not(.gridbox) .btn-hover-effect.hover-24 .ba-btn-transition:after {
    transform: translateY(100%);
    background: var(--button-background-color);
}

body:not(.gridbox) .btn-hover-effect.hover-24 .ba-btn-transition:hover:after {
    transform: translateY(0);
}

body:not(.gridbox) .btn-hover-effect.hover-24 .ba-btn-transition:hover span {
    transform: translateY(-200%);
    z-index:1
}

body:not(.gridbox) .btn-hover-effect.hover-24 .ba-btn-transition span {
    transition: .3s;
}


Class Suffix: btn-hover-effect hover-25

body:not(.gridbox) .btn-hover-effect.hover-25 .ba-btn-transition:hover {
    background: var(--button-background-color) !important;
}

body:not(.gridbox) .btn-hover-effect.hover-25 .ba-btn-transition i {   
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-100%);
    transition: .3s;
    width: 100%;
}

body:not(.gridbox) .btn-hover-effect.hover-25 .ba-btn-transition:hover i {
    transform: translateY(0);   
}

body:not(.gridbox) .btn-hover-effect.hover-25 .ba-btn-transition:after {
    transform: translateY(-100%);
    background: var(--button-background-color);
}

body:not(.gridbox) .btn-hover-effect.hover-25 .ba-btn-transition:hover:after {
    transform: translateY(0);
}

body:not(.gridbox) .btn-hover-effect.hover-25 .ba-btn-transition:hover span {
    transform: translateY(200%);
    z-index:1
}

body:not(.gridbox) .btn-hover-effect.hover-25 .ba-btn-transition span {
    transition: .3s;
}


Class Suffix: btn-hover-effect hover-26

body:not(.gridbox) .btn-hover-effect.hover-26 .ba-btn-transition:hover {
    background: var(--button-background-color) !important;
}

body:not(.gridbox) .btn-hover-effect.hover-26 .ba-btn-transition i {   
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(-100%);
    transition: .3s;
    width: 100%;
}

body:not(.gridbox) .btn-hover-effect.hover-26 .ba-btn-transition:hover i {
    transform: translateX(0);   
}

body:not(.gridbox) .btn-hover-effect.hover-26 .ba-btn-transition:after {
    transform: translateX(-100%);
    background: var(--button-background-color);
}

body:not(.gridbox) .btn-hover-effect.hover-26 .ba-btn-transition:hover:after {
    transform: translateX(0);
}

body:not(.gridbox) .btn-hover-effect.hover-26 .ba-btn-transition span {
    transition: .3s;
}

body:not(.gridbox) .btn-hover-effect.hover-26 .ba-btn-transition:hover span {
    transform: translateX(200%);
    z-index:1
}


Class Suffix: btn-hover-effect hover-27

body:not(.gridbox) .btn-hover-effect.hover-27 .ba-btn-transition:hover {
    background: var(--button-background-color) !important;
}

body:not(.gridbox) .btn-hover-effect.hover-27 .ba-btn-transition i {   
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: .3s;
    width: 100%;
}

body:not(.gridbox) .btn-hover-effect.hover-27 .ba-btn-transition:hover i {
    transform: translateX(0);   
}

body:not(.gridbox) .btn-hover-effect.hover-27 .ba-btn-transition:after {
    transform: translateX(100%);
    background: var(--button-background-color);
}

body:not(.gridbox) .btn-hover-effect.hover-27 .ba-btn-transition:hover:after {
    transform: translateX(0);
}

body:not(.gridbox) .btn-hover-effect.hover-27 .ba-btn-transition span {
    transition: .3s;
}

body:not(.gridbox) .btn-hover-effect.hove
r-27 .ba-btn-transition:hover span {
    transform: translateX(-200%);
    z-index:1
}

Step 4: Save and Check.

Save changes. Clear your browser cache and look results on the frontend.


Notice!

Hover Effects for buttons will be displayed only on the frontend. Changes will not be visible in the Gridbox Editor.