---
title: "How to Add Button Hover Animation in Elementor?"
url: https://theplusaddons.com/docs/button-hover-animation-in-elementor/
date: 2024-01-09
modified: 2026-09-10
lang: en
author: "Aditya Sharma"
description: "Are you looking to add a hover animation to an Elementor button? A hover effect confirms the button is interactive the moment a visitor reaches for it, which is a..."
image: https://theplusaddons.com/wp-content/uploads/2024/01/How-to-Add-Button-Hover-Animation-in-Elementor_-1024x536.jpg
word_count: 669
---

# How to Add Button Hover Animation in Elementor?

## 

- The Button widget in The Plus Addons for Elementor ships 9 ready-made hover effects, and the dropdown needs no CSS to write.
- The Button widget is available in The Plus Addons for Elementor Free and Pro, and it is enabled under ThePlus Settings > Widgets.
- The Button widget offers 23 button styles in Content > Layout, and hover effects work with every style.
- Float Shadow, Grow Shadow, and Shadow Radial add a Shadow Color control, while touch devices show no hover effect at all.

Are you looking to add a hover animation to an Elementor button? A hover effect confirms the button is interactive the moment a visitor reaches for it, which is a small thing that measurably helps people commit to the click.

The Button widget in The Plus Addons for Elementor ships nine ready-made hover effects. Pick one from a dropdown — there is no CSS to write.

*To check the complete feature overview documentation of The Plus Addons for Elementor Button widget, [click here](https://theplusaddons.com/docs/button-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/free-elementor-buttons/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** Free — the Button widget ships in both The Plus Addons for Elementor (Free) and Pro.- **Widget to enable:** Button, switched on under **ThePlus Settings > Widgets**.

> *This is the hover-triggered* effect — it fires when the visitor points at the button and stops when they move away. If you want an animation that loops on its own the whole time, that is a different control — see [continuous animation in an Elementor button](https://theplusaddons.com/docs/continuous-animation-in-button-elementor/).

## Step 1: Add the Button widget and set it up

Drag the **Button** widget into your container. On the **Content** tab, open **Layout**, pick a **Button Style** from the 23 available and set the **Text**. Hover effects work with every style.

![The Button Style dropdown highlighted in the Elementor panel](https://theplusaddons.com/wp-content/uploads/2026/09/tp-button-button-style-wide.webp)

## Step 2: Choose a hover effect

Switch to the **Style** tab, open the **Special** section, and pick one from the **Button Hover Effects** dropdown. It is empty by default, which means no effect.

![The Button Hover Effects dropdown highlighted in Style > Special with an effect selected](https://theplusaddons.com/wp-content/uploads/2026/09/tp-button-button-hover-effects-wide.webp)

## The Nine Effects

| Effect | What it does | Good for |
| ------ | ------------ | -------- |
| Grow | Scales the button up slightly | Almost any call to action |
| Push | Presses the button down | Buttons that submit something |
| Bounce In | Springs the button up | Playful or consumer sites |
| Float | Lifts the button upward | Cards and pricing tables |
| Wobble Horizontal | Shakes side to side | Drawing attention, used sparingly |
| Wobble Vertical | Shakes up and down | As above |
| Float Shadow | Lifts the button and casts a shadow beneath | Giving a flat button depth |
| Grow Shadow | Scales up and adds a shadow | The most common choice on dark backgrounds |
| Shadow Radial | Spreads a soft radial shadow | Subtle emphasis without movement |

**Float Shadow**, **Grow Shadow** and **Shadow Radial** also enable a **Shadow Color** control directly beneath the dropdown, so the shadow can match your palette instead of defaulting to grey.

## What It Looks Like

![An Elementor button playing a hover animation as the pointer moves over it](https://theplusaddons.com/wp-content/uploads/2024/01/button-hover-effects-demo.gif)

## Settings Reference

| Setting | Where | Options | Default |
| ------- | ----- | ------- | ------- |
| Button Hover Effects | Style > Special | 9 effects | Select Hover Effect (none) |
| Shadow Color | Style > Special | Colour — Float Shadow, Grow Shadow, Shadow Radial only | Not set |
| Button Style | Content > Layout | Select, 23 styles | Style 1 |

## Limitations

- **One effect at a time.** The dropdown is a single select, so a button cannot grow and float at once.- **Hover does not exist on touch devices.** Phone and tablet visitors see no effect at all, so never rely on it to signal that something is clickable.- **No per-device value.** The effect applies at every breakpoint.- **Shadow Color only applies to the shadow effects.** Setting it with Grow or Push selected changes nothing.- **Some button styles already animate on hover.** Stacking an effect on top of one of those can look busy — check the result before shipping.

## Troubleshooting

### The hover effect does not fire

Check the dropdown is not still on its empty default, then regenerate Elementor files from **Elementor > Tools > Regenerate CSS & Data** and clear any page cache or CDN in front of the site.

### The shadow colour control is missing

It only appears for **Float Shadow**, **Grow Shadow** and **Shadow Radial**. Pick one of those and it shows up underneath the dropdown.

### The effect looks wrong on top of my button style

A few of the 23 button styles have hover behaviour of their own. Either switch to a plainer style, or set Button Hover Effects back to none and let the style do the work.

## Related Docs

Also, read how to [add buttons inside Elementor tables](https://theplusaddons.com/docs/insert-button-inside-elementor-table/).

Did You Know? You can use [hover animation card layouts in Elementor](https://theplusaddons.com/docs/design-creative-hover-animation-card-layouts/).

- [Button widget: settings overview](https://theplusaddons.com/docs/button-widget-settings-overview/) — every control in the widget.- [Add continuous animation to an Elementor button](https://theplusaddons.com/docs/continuous-animation-in-button-elementor/) — the always-on alternative to this doc.- [Add an interval shake animation to a button](https://theplusaddons.com/docs/interval-shake-animation-in-button-elementor/)- [Change button text on hover in Elementor](https://theplusaddons.com/docs/button-text-on-hover-in-elementor/)

## Frequently Asked Questions

**Q: Why isn’t the button hover animation firing in Elementor?**
A: The most common miss is leaving Button Hover Effects on its empty default, which means no effect is selected. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH also notes that cached CSS can block the change, so regenerating Elementor files from Elementor > Tools > Regenerate CSS & Data and clearing any page cache or CDN is part of the fix. Hover effects only trigger on pointer devices, so phone and tablet visitors will not see them.

**Q: Which button styles work with hover animation in Elementor?**
A: Hover effects work with every one of the 23 Button Style options in the Button widget. That matters because the animation is separate from the base style, so you can pick a style first and then layer a hover effect on top. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH keeps the style choice in Content > Layout and the hover effect in Style > Special, which makes it easy to test combinations quickly.

**Q: What is the best hover effect for a call to action button?**
A: Grow is the safest default for most call to action buttons because it scales the button up slightly without feeling noisy. If the button submits something, Push fits better because it presses down instead of floating. For dark backgrounds, Grow Shadow is often the strongest choice because it adds depth and a shadow at the same time. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH ships all nine effects so you can match motion to intent instead of forcing one look everywhere.

**Q: Does button hover animation work on mobile and tablet?**
A: Hover animation does not exist on touch devices, so phone and tablet visitors see no effect at all. That is why The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH warns not to rely on hover as the only signal that a button is clickable. If a page depends on motion to guide users, that cue will only help desktop visitors who actually have a pointer.

**Q: Why is the shadow colour control missing in the button hover settings?**
A: The Shadow Color control only appears for Float Shadow, Grow Shadow and Shadow Radial. Those are the three effects that actually use a shadow color setting beneath the dropdown. If you pick Grow or Push instead, nothing changes because those effects do not use that control. That detail matters when you are trying to match a brand palette instead of letting the shadow fall back to grey.

**Q: Should I use button hover animation or continuous animation in Elementor?**
A: Use hover animation when you want motion only while someone points at the button. Use continuous animation when you want an always-on loop that keeps moving without user interaction. The page treats them as different controls, so they solve different problems: hover confirms interactivity at the moment of intent, while continuous animation keeps drawing attention over time. For the always-on version, see [continuous animation in an Elementor button](https://theplusaddons.com/docs/continuous-animation-in-button-elementor/).