Question

Css button animation

  • 14 September 2021
  • 4 replies
  • 48 views

Userlevel 1
  • New Member
  • 4 replies

need a slide left button animation on hover 

css link - 

 but Don’t know why unable to do that. can any one please help me with css class & rewrite for me with elementor button css class … although i already use (selector .elementor-button) but not working


4 replies

Userlevel 1

I tried both of them already …  don’t know why not working at all …

 

Userlevel 7
Badge +4

try targeting your button with 

 

selector .elementor-button a{

}

Badge

I found Elementor Button translated as <a> tag, I suggest to use Heading instead.

 

Customizing Additional CSS

 

Buttons

 

Userlevel 7
Badge +4

For a more global solution paste the custom css below and add a button class:

.buttonfx a{
color: black; /* button text color */
outline: none;
background: transparent;
border: none;
border-bottom: 4px solid #eee;
letter-spacing: 0.0625em;
padding: 8px 10px;
text-transform: uppercase;
font: bold 16px 'Bitter', sans-serif; /* use google font */
line-height: 2;
position: relative;
display: inline-block;
margin-right: 20px;
margin-bottom: 20px;
cursor: pointer;
text-decoration: none; /* remove underline if using A instead of BUTTON tag */
overflow: hidden;
transition: all .5s;
}

/* //// Default effect: Slide from Top //// */

.buttonfx a:before,
.buttonfx a:after{
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 100%;
background: #259f6c; /* onhover background color */
z-index: -1;
transform: translate3D(0,-100%,0); /* move elements above button so they don't appear initially */
transition: all .5s;
}

.buttonfx a:before{
background: #fafcd6; /* button default background color */
z-index: -2;
transform: translate3D(0,0,0);
}

.buttonfx a:hover{
color: white;
}

.buttonfx a:hover:after{
transform: translate3D(0,0,0);
transition: all .5s;
}

/* //// Slide Left //// */

.slideleft a:after{
top: 0;
z-index: -1;
transform: translate3D(-101%,0,0);
}

.slideleft a:hover:after{
transform: translate3D(0,0,0);
transition: all .5s;
}

/* //// Slide Corner //// */

.slidebottomleft a:after{
transform: translate3D(-100%,100%,0);
}

.slidebottomleft a:hover:after{
transform: translate3D(0,0,0);
transition: all .5s;
}

/* //// Angle In //// */


.angleinleft a:after{
width: 200%;
transform-origin: 0 bottom;
transform: translate3D(-50%,0,0) rotate(-50deg);
}

.angleinleft a:hover:after{
transform: rotate(0deg);
transition: all .5s;
}

/* //// Curtain Down //// */

.curtaindown a{
border: 1px solid #eee;
border-bottom: 4px solid #eee;
}

.curtaindown a:before,
.curtaindown a:after{
background: #259f6c;
transform: translate3D(0,-100%,0);
}

.curtaindown a:after{
transform: translate3D(0,100%,0);
}

.curtaindown a:hover:before,
.curtaindown a:hover:after{
transform: translate3D(0,-50%,0);
transition: all .5s;
}

.curtaindown a:hover:after{
transform: translate3D(0,50%,0);
}

/* //// Curtain Up //// */

.curtainup a{
transform-style: preserve-3d;
}

.curtainup a:before,
.curtainup a:after{
transform-origin: center center;
transform: scale(1,0);
}


.curtainup a:hover:before,
.curtainup a:hover:after{
transform: scale(1);
border-radius: 0;
}

/* //// Double Angle In //// */

.angleindouble a{
border: 1px solid #eee;
border-bottom: 4px solid #eee;
}

.angleindouble a:before{
top: 0;
left: 0;
width: 150%;
background: #259f6c;
transform-origin: 0 bottom;
transform: translateX(-100%) rotate(-30deg);
}

.angleindouble a:after{
top: 0;
left: auto;
right: 0;
width: 150%;
transform-origin: right bottom;
transform: translateX(100%) rotate(30deg);
}

.angleindouble a:hover:before{
left: 0;
transform: rotate(0deg);
transition: all .5s;
}

.angleindouble a:hover:after{
right: 0;
transform: rotate(0deg);
transition: all .5s;
}


/* //// Double Take //// */

.doubletake a:before,
.doubletake a:after{
width: 200%;
background: #259f6c;
transform-origin: 0 bottom;
transform: translate3D(-50%,0,0) rotate(-50deg);
}

.doubletake a:before{
opacity: .4;
}

.doubletake a:hover:before,
.doubletake a:hover:after{
transform: rotate(0deg);
transition: all .25s;
}

.doubletake a:hover:after{
transition-delay: .25s;
}


/* #### Bounce classes #### */

.bouncein a:hover:before,
.bouncein a:hover:after{
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66) !important;
}

 

Reply