Custom hover effect button on wordpress only use custom css code and elementor pro part 2

In this video, I will show you how to create a custom hover effect lear button on WordPress and elementor pro. I have only used custom CSS code. If you see the video I hope you can make this hover effect button on your WordPress site and HTML CSS site.

If you want this related video and many more videos please subscribe to my channel. I will always try to make very helpful and effective videos for you.
#mr.webdeveloper, #webdesign, #webdevelopment, #wordpress, #html, #css, #elementor

this button CSS code:
Style-1 code:

.custom-btn-1 .elementor-button {
position: relative;
z-index: 0;
overflow: hidden;
transition: color .4s linear;
width: 200px;
padding: 10px 25px;
}

.custom-btn-1 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000;
z-index: -1;
transition: transform .5s;
transform-origin: 0 0;
transition-timing-function: .5s,1.6,0.4,0.7;
transform: scaleY(0);
}

.custom-btn-1 .elementor-button:hover::before {
transform: scaleY(1);
}

Style-2 code:

.custom-btn-2 .elementor-button {
position: relative;
z-index: 0;
overflow: hidden;
transition: color .4s linear;
width: 200px;
padding: 10px 25px;
}

.custom-btn-2 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000;
z-index: -1;
transition: transform .5s;
transform-origin: 0 0;
transition-timing-function: .5s,1.6,0.4,0.7;
transform: scaleX(0);
}

.custom-btn-2 .elementor-button:hover::before {
transform: scaleX(1);
}

Style-3 code:

.custom-btn-3 .elementor-button {
position: relative;
z-index: 0;
overflow: hidden;
transition: color .4s linear;
width: 200px;
padding: 10px 25px;
}

.custom-btn-3 .elementor-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000;
z-index: -1;
transition: transform .5s;
transition-timing-function: .5s,1.6,0.4,0.7;
transform: scaleX(0);
}

.custom-btn-3 .elementor-button:hover::before {
transform: scaleX(1);
}