In this Elementor tutorial, I’ll show you how to use CSS to create a custom button hover effect. We frequently receive client requests for hover effects like this, so I wanted to demonstrate how even a seemingly simple button hover effect requires a solid understanding of CSS.
Timestamps:
- 0:00 Introduction / Demo
- 0:28 Elementor Button Widget
- 1:11 Add CSS Code
- 4:37 Left to Right Animation
- 5:14 Right to Left Animation
- 6:39 Top to Bottom Animation
- 7:21 Bottom to Top Animation
- 7:45 Disable Effect on Tablet & Mobile
CSS Code
.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 */
}
