6 Amazing Elementor Button Hover Effects (No Plugins Required!)

Want to make your Elementor buttons stand out? In this tutorial series, I’ll show you 6 stunning button hover effects that you can add to your WordPress site using just custom CSS – no plugins needed!

📺 Watch the Full Tutorial Series

[Embed your YouTube playlist or individual videos here]

1. Effect #1: Vertical Slide Up (Text Push)
2. Effect #2: Horizontal Slide
3. Effect #3: Fill From Bottom
4. Effect #4: Border Draw
5. Effect #5: 3D Flip Effect
6. Effect #6: Shutter Effect

Effect #1: Vertical Slide Up (Text Push)

Transform your boring buttons into eye-catching interactive elements! This effect pushes the button text up vertically and replaces it with new text sliding up from below.

✨ What You’ll Learn:

How to create a smooth vertical text transition
Customizing the hover text
Adjusting animation speed
BONUS: Auto-animation option with JavaScript (optional)

📋 How to Apply:

Step 1: Add CSS Class

Select your button widget in Elementor
Go to Advanced → CSS Classes
Add: slide-up-button

Step 2: Add Custom CSS

Go to Elementor → Custom Code → Add CSS
Paste the CSS code below

💻 CSS Code:

.slide-up-button .elementor-button {
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

/* Animate the ENTIRE content wrapper (icon + text together) */
.slide-up-button .elementor-button-content-wrapper {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
    position: relative;
}

/* Keep original styles for text-only buttons */
.slide-up-button .elementor-button-text {
    display: block;
}


.slide-up-button .elementor-button::before {
    content: "\f35a New Text Here";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: transform 0.3s ease;
    font-family: "Font Awesome 5 Free";  /* or "Font Awesome 6 Free" */
    font-weight: 400;  /* 400 for Regular (far), 900 for Solid (fas) */
}

.slide-up-button .elementor-button:hover .elementor-button-content-wrapper { 
    transform: translateY(-150%);  /* Adjust this value based on your button padding */
}

.slide-up-button .elementor-button:hover::before {
    transform: translateY(-100%);
}

🎯 Customization Options:

Change the hover text in content: "New Text Here"
Adjust speed by modifying 0.3s value
Change translateY(-100%) to increase/decrease slide distance

🔥 Optional: Auto-Animation

Want the button to animate automatically? Add this JavaScript!

JavaScript Code:

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Find all buttons with slide-up-button class
    const buttons = document.querySelectorAll('.slide-up-button');
    
    buttons.forEach(function(button) {
        // Add the auto-animate class to enable animation
        button.classList.add('auto-animate');
    });
});
</script>

Additional CSS for Auto-Animation:

/* Auto-Animation Keyframes - MUST match the hover values */
@keyframes autoSlideUpText {
0%, 45% {
transform: translateY(0);
}
50%, 95% {
transform: translateY(-150%); /* MUST match the hover value above */
}
100% {
transform: translateY(0);
}
}

@keyframes autoSlideUpBefore {
0%, 45% {
transform: translateY(0);
}
50%, 95% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}

/* Apply animation when auto-animate class is added */
.slide-up-button.auto-animate .elementor-button-content-wrapper {
animation: autoSlideUpText 4s ease-in-out infinite;
}

.slide-up-button.auto-animate .elementor-button::before {
animation: autoSlideUpBefore 4s ease-in-out infinite;
}

/* Pause animation on hover */
.slide-up-button.auto-animate .elementor-button:hover .elementor-button-content-wrapper,
.slide-up-button.auto-animate .elementor-button:hover::before {
animation-play-state: paused;
}

Effect #2: Horizontal Slide

Make your button text slide horizontally! The original text slides out to the right while new text slides in from the left.

✨ What You’ll Learn:

Creating horizontal text animations
Customizing slide direction
Perfect for call-to-action buttons

📋 How to Apply:

Step 1: Add CSS Class

CSS Class: horizontal-slide-button

Step 2: Add Custom CSS

💻 CSS Code:

    .horizontal-slide-button .elementor-button {
    overflow: hidden;
    position: relative;
}

.horizontal-slide-button .elementor-button-text {
    display: block;
    transition: transform 0.4s ease;
}

.horizontal-slide-button .elementor-button::before {
    content: "Slide Right!";
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.4s ease;
}

.horizontal-slide-button .elementor-button:hover .elementor-button-text {
    transform: translateX(150%); /* Adjust this value based on your padding */
}

.horizontal-slide-button .elementor-button:hover::before {
    left: 0;
}

🎯 Pro Tips:

Change left: -100% to left: 100% to reverse the slide direction
Modify "Slide Right!" to your desired hover text
Adjust 0.4s for faster or slower animations

Effect #3: Fill From Bottom

This elegant effect fills your button with color from the bottom up, creating a smooth paint-fill animation.

✨ What You’ll Learn:

Creating fill animations
Working with transparent backgrounds
Border to solid color transitions

📋 How to Apply:

Step 1: Add CSS Class

CSS Class: fill-bottom-button

Step 2: Add Custom CSS

💻 CSS Code:

    .fill-bottom-button .elementor-button {
    position: relative;
    overflow: hidden;
    background: inherit;
    border: inherit;
    color: inherit;
}

.fill-bottom-button .elementor-button::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #667eea;
    transition: height 0.4s ease;
    z-index: 0;
}

.fill-bottom-button .elementor-button-content-wrapper {
    position: relative;
    z-index: 1;
}

.fill-bottom-button .elementor-button:hover {
    color: white;
}

.fill-bottom-button .elementor-button:hover::before {
    height: 100%;
}

🎯 Customization Options:

Change bottom: 0 to top: 0 for fill from top
Modify colors in border and background properties
Adjust height: 100% for partial fills

Effect #4: Border Draw

An impressive effect where borders draw themselves around your button from opposite corners, creating a sophisticated animation.

✨ What You’ll Learn:

Creating animated borders with pseudo-elements
Corner-to-corner animations
Professional-looking outline effects

📋 How to Apply:

Step 1: Add CSS Class

CSS Class: border-draw-button

Step 2: Add Custom CSS

💻 CSS Code (Variation 1):

<style>
    .border-draw-button .elementor-button {
    position: relative;
    transition: border-color 0.3s ease, color 0.3s ease;
    /* Border radius will be set in Elementor */
}

/* Optional: Set custom values via CSS variables */
.border-draw-button {
    --border-width: 2px;
    --border-color: #667eea;
    --hover-color: #764ba2;
    --border-extend: 10px;  /* How much the border extends beyond corners */
}

.border-draw-button .elementor-button::before,
.border-draw-button .elementor-button::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    transition: all 0.4s ease;
    box-sizing: border-box;
}

/* Top-left corner with extension */
.border-draw-button .elementor-button::before {
    top: calc(var(--border-width, 2px) * -1);
    left: calc(var(--border-width, 2px) * -1);
    border-top: var(--border-width, 2px) solid var(--border-color, currentColor);
    border-left: var(--border-width, 2px) solid var(--border-color, currentColor);
    border-top-left-radius: inherit;  /* Inherit border radius */
    border-bottom-right-radius: inherit;  /* Add this */
}

/* Bottom-right corner with extension */
.border-draw-button .elementor-button::after {
    bottom: calc(var(--border-width, 2px) * -1);
    right: calc(var(--border-width, 2px) * -1);
    border-bottom: var(--border-width, 2px) solid var(--border-color, currentColor);
    border-right: var(--border-width, 2px) solid var(--border-color, currentColor);
    border-bottom-right-radius: inherit;  /* Inherit border radius */
    border-top-left-radius: inherit;  /* Add this */
}

.border-draw-button .elementor-button:hover {
    border-color: transparent !important;
}

.border-draw-button .elementor-button:hover::before,
.border-draw-button .elementor-button:hover::after {
    width: calc(100% + var(--border-extend, 10px));
    height: calc(100% + var(--border-extend, 10px));
}

.border-draw-button .elementor-button:hover {
    color: var(--hover-color, #764ba2);
}
</style>

Or 💻 CSS Code (Variation 2):

<style>
    .border-draw-button .elementor-button {
    position: relative;
    /* Elementor sets: background, border, color, padding, etc. */
    transition: border-color 0.3s ease, color 0.3s ease;
}

/* Optional: Set custom values via CSS variables */
.border-draw-button {
    --border-width: 2px;      /* Change this to match your design */
    --border-color: #667eea;  /* Change this to match your design */
    --hover-color: #764ba2;   /* Text color on hover */
}

.border-draw-button .elementor-button::before,
.border-draw-button .elementor-button::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    transition: all 0.4s ease;
    box-sizing: border-box;
    border-radius: inherit;
}

.border-draw-button .elementor-button::before {
    top: 0;
    left: 0;
    border-top: var(--border-width, 2px) solid var(--border-color, currentColor);
    border-left: var(--border-width, 2px) solid var(--border-color, currentColor);
}

.border-draw-button .elementor-button::after {
    bottom: 0;
    right: 0;
    border-bottom: var(--border-width, 2px) solid var(--border-color, currentColor);
    border-right: var(--border-width, 2px) solid var(--border-color, currentColor);
}

.border-draw-button .elementor-button:hover {
    border-color: transparent !important;  /* Hide original border */
    color: var(--hover-color, #764ba2);    /* Optional: change text color */
}

.border-draw-button .elementor-button:hover::before,
.border-draw-button .elementor-button:hover::after {
    width: 100%;
    height: 100%;
}
</style>

🎯 Customization Tips:

Change border colors to match your brand
Adjust border-width for thicker/thinner lines
Modify 0.4s for animation speed

Effect #5: 3D Flip Effect

Create a stunning 3D flip animation that reveals text on the “back” of your button. Perfect for modern, interactive designs!

✨ What You’ll Learn:

Working with CSS 3D transforms
Creating flip card effects
Perspective and transform-style properties

📋 How to Apply:

Step 1: Add CSS Class

CSS Class: flip-3d-button

Step 2: Add Custom CSS

💻 CSS Code:

.flip-3d-button {
    perspective: 1000px;
}

.flip-3d-button .elementor-button {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.flip-3d-button .elementor-button::before {
    content: "Flipped!";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #764ba2;
    color: white;
    transform: rotateX(-90deg);
    transform-origin: center bottom;
    transition: transform 0.6s;
}

.flip-3d-button .elementor-button:hover {
    transform: rotateX(50deg);
}

🎯 Pro Tips:

Change rotateX to rotateY for horizontal flip
Modify "Flipped!" to your desired back text
Adjust 0.6s for flip speed
Change perspective value for different 3D depth

Effect #6: Shutter Effect

Two colored panels slide in from top and bottom simultaneously, creating a dramatic shutter effect that fills your button.

✨ What You’ll Learn:

Creating dual-panel animations
Synchronized transitions
Dramatic fill effects

📋 How to Apply:

Step 1: Add CSS Class

CSS Class: shutter-button

Step 2: Add Custom CSS

💻 CSS Code:

.shutter-button .elementor-button {
    position: relative;
    overflow: hidden;
}

/* Make sure content wrapper is above the animation */
.shutter-button .elementor-button-content-wrapper {
    position: relative;
    z-index: 1;
}

.shutter-button .elementor-button::before,
.shutter-button .elementor-button::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    left: 0;
    background: #667eea;
    transition: height 0.3s ease;
    z-index: 0;
}

.shutter-button .elementor-button::before {
    top: 0;
}

.shutter-button .elementor-button::after {
    bottom: 0;
}

.shutter-button .elementor-button:hover {
    color: white;
}

.shutter-button .elementor-button:hover::before,
.shutter-button .elementor-button:hover::after {
    height: 51%;
}

🎯 Customization Options:

Change height: 51% to adjust panel meeting point
Modify for horizontal shutters by changing width/height
Adjust colors to match your design
Change 0.3s for faster/slower effect

Share This Post

Mallami Adekunle

Kunle Mallami is a digital entrepreneur with expertise in website design, digital marketing, brand strategy and digital content writing. When he's not doing any of these, he will probably be on YouTube learning.

Catch Up On Business & Tech Round Up

SBA Supercharges Small Businesses with $20 Million Boost for Global Expansion

Updated on September 25, 2023
Mallami Adekunle

California Fast Food Workers about to Win Big with Minimum Wage Boost

Updated on September 25, 2023
Mallami Adekunle

Small Business Owners Must Prepare for the Google Antitrust Trial

Updated on September 25, 2023
Mallami Adekunle

6 Amazing Elementor Button Hover Effects (No Plugins Required!)

Table of Contents

Effect #1: Vertical Slide Up (Text Push)

Effect #2: Horizontal Slide

Effect #3: Fill From Bottom

Effect #4: Border Draw

Effect #5: 3D Flip Effect

Effect #6: Shutter Effect

Share This Post

Mallami Adekunle

Leave a Reply Cancel reply

More On Marketing