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

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: "\f3fe\00a0\00a0 New Text Here"; /* \00a0 = non-breaking space */
    white-space: pre;  /* This preserves the spaces! */
    
    /* Inherit ALL text properties from the button */
    font-size: inherit;
    font-weight: inherit;
    font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands", var(--e-global-typography-text-font-family), sans-serif; /* Font Awesome for icon, then inherit for text */
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.slide-up-button .elementor-button:hover .elementor-button-content-wrapper { 
    transform: translateY(-190%);  /* 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!

Add Extra CSS Class

• Select your button widget in Elementor
• Go to Advanced → CSS Classes
• Add: auto-animate beside slide-up-button so you will have slide-up-button auto-animate

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(-190%); /* MUST match the hover value in first css*/
}
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-content-wrapper {
    transition: transform 0.4s ease;
}

.horizontal-slide-button .elementor-button::before {
    content: "\f3fe\00a0\00a0 Slide Right!"; /* \00a0 = non-breaking space */
    white-space: pre;  /* This preserves the spaces! */
    
    /* Inherit ALL text properties from the button */
    font-size: inherit;
    font-weight: inherit;
    font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands", var(--e-global-typography-text-font-family), sans-serif; /* Font Awesome for icon, then inherit for text */
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    
    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-content-wrapper {
    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;
}

.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):

    .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));
}

Or 💻 CSS Code (Variation 2):

    .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%;
}

🎯 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