Requirements for Custom Hover Buttons Animation in Elementor –
1 – Elementor Pro (Custom CSS) OR
2 – Any Alternative CSS Option
Button #1
arrow 1 is the left arrow.
arrow2 is the right arrow.
btntext is the button text.
.btntext {
transition: 0.2s;
color:#856EFF;
}
.arrow1, .arrow2 {
transition:0.2s;
}
selector:hover .arrow1 {
transform: translate(60px,0);
transition: 0.2s;
}
selector:hover .arrow2 {
transform: translate(50px,0);
transition: 0.2s;
}
selector:hover .btntext {
color: #fff;
transform: translate(30px,0);
transition: 0.2s;
}
selector:hover .arrow1 .elementor-icon {
color:#fff;
}
selector:hover .arrow2 .elementor-icon {
color:#856EFF;
}
Button #2
arrow3 is the arrow.
selector:after{
content:'';
background-color:#856EFF;
position: absolute;
height: 100%;
width: 100%;
transform:translate(-100%,0);
transition:0.3s;
}
selector:hover:after{
transform:translate(0%,0%);
}
selector:hover .arrow3 {
transform: translate(150px,0);
transition: 0.3s;
}
selector:hover .btntext {
color: #fff;
transform: translate(200px,0);
transition: 0.3s;
}
Button #3
arrow4 is the arrow.
selector:after{
content:'';
background-color:#856EFF;
position: absolute;
height: 100%;
width: 100%;
transform:translate(0%,100%);
transition:0.3s;
}
selector:hover:after{
transform:translate(0%,0%);
}
selector:hover .arrow4 {
transform: translate(0%,-110%);
transition: 0.3s;
}
selector:hover .btntext {
color: #fff;
transform: translate(0,-50px);
transition: 0.3s;
}
Glow Buttons
glowbtn is the CSS class for button
.glowbtn .elementor-button {
transition: 0.5s;
}
.glowbtn .elementor-button:hover {
box-shadow: -10px 2px 30px rgba(106, 72, 242, 00.5),
12px -2px 30px rgba(206, 164, 239, 0.5);
}
.glowbtn2 .elementor-button {
transition: 0.5s;
}
.glowbtn2 .elementor-button:hover {
/* Second box-shadow with a different color */
box-shadow:
-10px 2px 30px rgba(255, 0, 0, 0.5),
10px -2px 30px rgba(255, 255, 0, 0.5) ;
}
.glowbtn3 .elementor-button {
transition: 0.5s;
}
.glowbtn3 .elementor-button:hover {
/* Second box-shadow with a different color */
box-shadow:
-10px 2px 30px rgba(255, 0, 0, 0.5),
12px -2px 30px rgba(255, 255, 0, 0.5),
-10px 2px 30px rgba(0, 128, 0, 0.5),
12px -2px 30px rgba(0, 0, 255, 0.5);
}
.glowbtn4 .elementor-button {
transition: 0.5s;
}
.glowbtn4 .elementor-button:hover {
box-shadow: -10px 2px 30px rgba(0, 128, 0, 0.5), 12px -2px 30px rgba(0, 0, 255, 0.5);
}
