10+ Stunning Button Hover Effects You Can Use in Elementor (With Code Examples)

Buttons are a core part of every website — they guide users, trigger actions, and drive engagement. But too often, they’re overlooked. A good hover effect can turn a plain button into a micro-interaction that enhances your site’s UX. In this post, I’ll share 10+ creative button hover effects you can use right now in Elementor (or plain HTML/CSS). These effects are lightweight, stylish, and easy to implement with just a few lines of CSS.

🧩 How to Use These in Elementor Add a Button Widget to your page. Go to the Advanced tab → CSS Classes, and enter one of the class names provided (e.g., btn-shimmer). Paste the CSS into: Site Settings > Custom CSS (Elementor Pro), or Your theme’s Customizer > Additional CSS.

🔘 Button Effects Included

1. Slide Up Text

				
					.btn-slide-up {
  position: relative;
  overflow: hidden;
}
.btn-slide-up::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  background: #0073e6;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top 0.3s;
}
.btn-slide-up:hover::after {
  top: 0;
}

Add data-text=”Hovered Text” to your button’s HTML attributes.

Here’s how to do it:

Select the Button Widget: Open your Elementor page and select the button widget you want to modify.
Navigate to Advanced Tab: In the left-hand panel, go to the Advanced tab.
Open Custom Attributes: Expand the Attributes section (or Custom Attributes, depending on your Elementor version).,/li>
Add the Attribute: In the provided field, enter your custom attribute in the format attribute_key|attribute_value.

For data-text, it would look like this:

				
					 data-text|Your Button Text

2. Border Grow

				
					.btn-border-grow {
  border: 2px solid #00c896;
  transition: 0.3s;
}
.btn-border-grow:hover {
  background-color: #00c896;
  color: white;
  box-shadow: 0 0 0 4px rgba(0, 200, 150, 0.3);
}

3. Underline Slide In

				
					.btn-underline::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  left: 0;
  bottom: 6px;
  background: #d62828;
  transition: width 0.3s ease;
}
.btn-underline:hover::after {
  width: 100%;
}

4. Fill From Left

				
					.btn-fill-left::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #fcbf49;
  transition: left 0.4s ease;
  z-index: -1;
}
.btn-fill-left:hover::before {
  left: 0;
}

5. Ghost Fill

				
					.btn-ghost-fill {
  border: 2px solid #1d3557;
  color: #1d3557;
  background: transparent;
  transition: background 0.3s, color 0.3s;
}
.btn-ghost-fill:hover {
  background: #1d3557;
  color: #fff;
}

6. Shimmer Effect

				
					.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
}
.btn-shimmer:hover::after {
  animation: shimmer 0.8s forwards;
}
@keyframes shimmer {
  to {
    left: 125%;
  }
}

7. Press Down Effect

				
					.btn-press-down:active {
  transform: scale(0.95);
}

8. Ripple Click Effect

				
					.btn-ripple::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  width: 20px;
  height: 20px;
  transform: scale(0);
  opacity: 0;
}
.btn-ripple:active::after {
  animation: ripple 0.6s ease;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
@keyframes ripple {
  to {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

9. Gradient Slide Right

				
					.btn-gradient-slide {
  background: linear-gradient(120deg, #ff6f00, #ffcc00);
  background-size: 200% 100%;
  transition: background-position 0.3s ease;
}
.btn-gradient-slide:hover {
  background-position: right center;
  color: white;
}

10. 3D Flip

				
					.btn-flip {
  perspective: 1000px;
}
.btn-flip .front, .btn-flip .back {
  display: block;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.btn-flip .back {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
}
.btn-flip:hover .front {
  transform: rotateY(180deg);
}
.btn-flip:hover .back {
  transform: rotateY(360deg);
}

11. Gradient Slide Right

				
					.btn-gradient-slide {
  background: linear-gradient(120deg, #ff6f00, #ffcc00);
  background-size: 200% 100%;
  transition: background-position 0.3s ease;
}
.btn-gradient-slide:hover {
  background-position: right center;
  color: white;
}