...
Make sure to use same CSS Class ID

.swipe-left-hover {
line-height: 0; /* Removes extra space inside the container */
}

.swipe-left-hover .elementor-button {
position: relative; /* Required for pseudo-element positioning */
overflow: hidden; /* Ensure the sliding effect stays within bounds */
background-color: #5D9CC7!important; /* Default background color */
}

.swipe-left-hover .elementor-button::before {
content: ”; /* Required for pseudo-element to render */
position: absolute; /* Position pseudo-element relative to button */
top: 0; /* Align to top edge */
left: -100%; /* Start outside of the button */
width: 100%; /* Full width of the button */
height: 100%; /* Full height of the button */
background-color: #333333; /* Hover background color */
transition: left 0.3s ease; /* Smooth slide-in effect */
}

.swipe-left-hover .elementor-button:hover::before {
left: 0; /* Slide into view on hover */
}

.swipe-left-hover .elementor-button-text {
z-index: 100; /* Ensure text appears above pseudo-element */
}

body[data-elementor-device-mode=”tablet”]
.swipe-left-hover .elementor-button::before {
transition-duration: 0s; /* Disable transition on tablet */
}

body[data-elementor-device-mode=”mobile”]
.swipe-left-hover .elementor-button::before {
transition-duration: 0s; /* Disable transition on mobile */
}

Additional Instructions/Information
Make sure to give the button the same Class ID. In this case it’s: swipe-left-hover. You can also change the button colors in the CSS code. I gave them a bold style.
Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.