Halloween 40% off every Pro plan. Lifetime from $51, pay once.40% off Pro Vanishes in Claim40% off
Get Animation Addons Pro
Classic Elementor widget · Free

Button Widget for Elementor Animated buttons with seven shapes and seven hover effects

Add an Elementor animated button without writing CSS. Pick a shape, from a plain pill to a square, oval, circle or ellipse, then pick how the button reacts on hover: a fill that splits from the centre, crosses over, rolls in from the top or left, or a border that draws itself. Add your text, icon and link and you have an Elementor call to action button. Free, on Elementor Free.

Try it free See the live demos
  • Free on WordPress.org
  • 7 styles
  • 7 hover effects
  • Icon beside or below the text

Classic widget · Elementor 3 and 4Updated

Live demos

Fourteen button designs, live

Every button from the original page, with its own colours, placed in a small site, two designs per site. Hover a button, or tab to it with the keyboard, to see the effect.

Arolax®WorkStudioJournal
Design studio

Brands and websites people remember

Strategy, identity and Elementor builds for teams that want to launch fast and look sharp.

View all work
Our services
A tablet showing a website the studio designed, with the headline Give your people a platform
Wine · 2026

Malepère estate, online

Read the case
Fashion · 2026

The Shally lookbook

Read the case
Film · 2025

Northlight festival

Read the case
Agency home page

Elementor underline button and outline pill

The hero of this design studio page has a white button with an arrow and an outline pill that fills white on hover. Under it, three case studies each end in an Elementor underline button: the line shrinks away and the text changes colour. The hero pair is an Elementor button with arrow.

Hover a button or a case link

Set Style to Default and Hover Style to None for the hero buttons, then pick an arrow in Icon and set Icon Position to After. For the case links set Style to Underline.

HaldenWorkAboutContact
Product designer · Oslo

Calm, useful products for busy teams

Ten years of design systems, booking flows and dashboards for clinics, shops and studios.

View work
Download CV
Download CV
A lounge with wooden wall slats and orange chairs, from a Halden project
Services

Audits, design systems and product sprints

Explore services
Book a sprint
Designer portfolio

Divided and Cross hover on a portfolio

A product designer’s page with a View work button and a Download CV button. On hover a second colour opens from the centre out to both sides, lavender into peach. The orange pills in the services band fill from the middle line up and down at once.

Hover each button

Set Hover Style to Divided for the lavender and peach buttons and to Cross for the orange pills. The orange pills also use a dot for Icon, placed Before the text.

NorthlightFilmsFestivalTickets
A still from a Northlight documentary, a man in a blue turban in the desert
Festival 2026

Eleven days of short films by the sea

Forty films, six venues and open-air screenings on the harbour from 6 November.

Learn more
Programme
Press and partners

Screen your film with us

Distributors, schools and press can reach the festival office all year.

Contact now
Press kit
Festival site

Cropping and Rollover Top buttons

A film festival page with two blocks, each with a pair of uppercase buttons. In the first pair a tilted band of colour sweeps across the button. In the second pair the fill drops in from the top edge and falls out through the bottom when the pointer leaves.

Move the pointer in and out

Set Hover Style to Cropping for Learn more and Programme, and to Rollover Top for Contact now and Press kit.

Medica ClinicDoctorsCareBook
Three women talking at a table in a bright clinic office
Family care

Same-day visits, evenings included

Book a doctor you already know, at the clinic or by video, in under a minute.

Appointment
Video visit
Open today

8:00 to 20:00 · three clinics

Appointment
Call us
Booking page

Rollover Left and Oval buttons for a clinic

A clinic booking page. The Appointment and Video visit pills fill from the left on hover. The Oval buttons in the opening-hours band fill from the point where the pointer enters and lean toward it. Those two touches need Animation Addons Pro.

Hover from different sides

Set Hover Style to Rollover Left for the two pills. In the hours band set Style to Oval. The pointer fill and pull on the Oval buttons come from Animation Addons Pro.

Sahara FilmsFilmsStudioContact
Production company

Documentaries shot where the road ends

Small crews, long trips and stories told by the people who live them.

Know more
Our films
A wide wooden screening room with low seats
Work with us

Have a story worth the trip?

Let’s talk
Send a pitch
Production company

Parallel Border and Mask buttons

A film company page. The Know more and Our films buttons hide their border and draw it again from two opposite corners. The Let’s talk and Send a pitch buttons are covered by an ink stain that spreads from the middle and shows the hover colour underneath.

Hover each button

Set Hover Style to Parallel Border and Icon Position to After for the first pair. For the lower pair set Style to Mask and choose a long arrow in Icon.

Arolax®WorkStudioContact
New business

Have a project in mind?

Tell us what you are building. We reply within one working day.

Let’s talk
Get a quote
Let’s talk
Start a project
Contact section

Rollover Cross and Square buttons

A contact block with an orange call to action. Rollover Cross draws two corner borders that slide in from opposite sides while the fill changes. The Square buttons below stack the text over a long arrow, one with Rollover Top and one with Divided.

Hover each button

Set Hover Style to Rollover Cross for the first pair. For the two lower buttons set Style to Square and Hover Style to Rollover Top and Divided.

Maison FormeProjectsStudioVisit
Interior design

A calm home, planned room by room

A two-hour visit, a written brief and a first mood board within ten days.

Let’s talk
Our work
A sunlit living room with a low sofa and wooden ceiling, a Maison Forme project
Studio visits

Monday to Friday, 9 to 6

Appointment
Visit us
Studio visit page

Round Circle and Ellipse buttons

An interior studio page with round buttons. The Circle buttons fill with colour on hover. The Ellipse buttons are a leaf-shaped pill inside a coloured ring, and on hover the ring and the fill swap colours. With Pro, both lean toward the pointer.

Hover from different sides

Set Style to Circle for the two round buttons beside the text. In the Studio visits band set Style to Ellipse. The lean toward the pointer comes from Animation Addons Pro.

Features

Key features of the Button Widget

Every item below is a real setting in the widget panel. No CSS, no custom code.

Seven Elementor button styles

Choose a Style: Default, Square, Underline, Mask, Oval, Circle or Ellipse. These Elementor button styles cover a text link, a pill, a square and a big round call to action.

Seven button hover effects

Give the Default and Square styles a Hover Style: Divided, Cross, Cropping, Rollover Top, Rollover Left, Parallel Border or Rollover Cross. Each Elementor button hover effect is one option in the list.

Your own button text

Write any label in Text, from a short CTA to a longer link, and style it with Typography.

Button with icon

Make an Elementor button with icon: pick an Icon from the Elementor library or your own SVG, and set its Icon Size.

Icon before or after

Use Icon Position to place the icon Before or After the text. An arrow after the text gives you an Elementor button with arrow.

Direction and spacing

Set Direction to put the icon beside the text or under it, and fine-tune the gap with Icon Spacing.

Easy link options

Point the Link to any page, anchor, email or phone, open it in a new tab or add nofollow. Current Link links to the page the button is on.

Full width and colours

Set Button Stretch for an Elementor full width button (Default and Underline styles). Set Text Color, Background (colour or gradient) and Border Color for Normal and Hover, plus Border, Border Radius, Padding and, for Circle and Square, Button Size.

Step by step

How to add a hover button in Elementor

How to add a button in Elementor with a hover effect: five steps, no code. The bold names are the labels in the Elementor panel.

  1. Install and activate Animation Addons for Elementor from WordPress.org, and turn on Button in the plugin’s element list.

  2. Open your page in Elementor, search the panel for Button from Animation Addons and drag it onto the page.

  3. Choose a Style. For Default or Square, also pick a Hover Style.

  4. Write the Text, add the Link, and pick an Icon, Icon Position and Direction if you want one.

  5. In the Style tab, set the colours for Normal and Hover, the border and radius, check it on mobile and publish.

Try it free Free on WordPress.org · Works with Elementor Free
FAQ

Questions about the Button Widget

How do I add an Elementor button hover effect?

Drag the free Button widget from Animation Addons onto the page, keep the Default or Square style and choose a Hover Style. The effect is built in, so you only set the text, link and the Normal and Hover colours. No CSS is needed.

Which hover effects does the Button Widget have?

Divided, Cross, Cropping, Rollover Top, Rollover Left, Parallel Border and Rollover Cross, for the Default and Square styles. Underline, Mask, Oval, Circle and Ellipse have their own built-in hover.

How do I make an Elementor round button?

Set Style to Circle and use Button Size to set its width and height. Square works the same way. Oval and Ellipse give a wider round shape that grows with the text.

How do I make an Elementor button with icon?

Add an Icon, then pick Before or After in Icon Position. To put the icon under the text, set Direction to Column. Use Icon Spacing to set the gap and Icon Size in the Style tab to set its size.

How do I make an Elementor full width button?

Open the Style tab, find Button Stretch and set it to Stretch. It works with the Default and Underline styles. Stretch Align then sets whether the text sits at the start, centre or end.

How to add a button in Elementor with this widget?

Search the Elementor panel for Button from Animation Addons and drag it onto the page. Write the Text, add a Link, choose a Style and, for Default or Square, a Hover Style. It takes about a minute.

How is it different from the Advanced Button?

The Advanced Button has eight finished designs with effects like a 3D text flip. The Button Widget lets you mix seven shapes with seven hover effects, and adds Direction, Button Stretch and Current Link.

How is it different from Elementor’s Button?

Elementor’s Button has an Elementor button hover animation setting that moves the whole button, such as grow or pulse. The Button Widget animates a fill or border inside the button and adds round, oval, ellipse and mask shapes.

Is it a free Elementor button widget?

Yes. It is in the Animation Addons plugin on WordPress.org and works with Elementor Free. Elementor Pro is optional. Only the pointer fill and pull on Oval and Circle need Animation Addons Pro.

Does it work in Elementor 4?

Yes. It is a classic widget, so Elementor 4 lists it with the legacy widgets and it works on the same page as atomic elements.

Animation Addons Pro · Elementor 4

Buttons with a little motion

Seven shapes and seven hover effects for your calls to action, free on Elementor Free.

Get Animation Addons Pro Try it free

Halloween deal40% off every Pro planEnds 5 Nov

  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license