Divi Elegant Themes CTA Button Animated CTA Buttons

8 animated CTA buttons for Divi

23 Jun, 2020
Chrille Hedberg
Animated CTA buttons | Divi

The guide to building CTA buttons for Divi was originally written by Jason Champagne for Elegant Themes and can be found on this link. I’ve translated it into Swedish to make it available for people in Sweden, but since I run a multilingual website it’s translated back into English.

What is a CTA button?

CTA is short for Call To Action and urges the visitor to click the button. “ORDER”, “Click here for …”, “Try now” and stuff like that are examples of CTA buttons.

These buttons are often used on e-commerce sites (physical products or services) or with information (blogs, pages with content for download, etc.).

Why use animated CTA buttons?

The idea behind the CTA button is that the eyes should be drawn to it. The color of the button should stand out from the color scheme of the site. Do you have a website in gray and white – choose a button in, for example, red or pink! By adding on an animation, the eyes will automatically be drawn to what moves – that’s a bit how our bodies work. However, if there’s too much going on at the screen at once, the visitor will only get a headache.

Personally, I’m not much for stuff bouncing and twirling on the screen. It’s crazy uncommon for me to use videos on my sites, and if I do I usually add a play button so the visitor can choose to click play.

A CTA button, however, is a little bit different and we want it to stand out!

Animated CTA Buttons for Divi Elegant Themes

This is what the buttons will look like when they are finished, and they will be located in the header/menu bar of the site.

Download layouts

You choose to either build the buttons yourself, or you can download a pre-made import file with layouts.

You need Divi installed and activated, but that maybe wasn’t a big surprise? This guide is also based on this template where the 404 page is the one used.

Animated CTA Buttons for Divi Elegant Themes

Go to Divi > Theme Builder. Select import/export (Portability, marked with the number 2 in the image above. In the pop-up window, select the theme-builder-pack-2-404-page-template.json that you downloaded (and un-zipped). Then click Import.

Animated CTA Buttons for Divi Elegant Themes

You can also choose to import global headers and footers as static layouts.

Animated CTA Buttons for Divi Elegant Themes

Click on the edit button to change the header.

CTA #1 – Bounce

Animated CTA Buttons for Divi Elegant Themes

 

Button settings:

Animated CTA Buttons for Divi Elegant Themes

  • Animation style: Bounce
  • Amination direction: Down
  • Animation duration: 1100 ms
  • Animation delay: 1500 ms
  • Animation start opacity: 100%

CTA #2 – Verical Flip

Animated CTA Buttons for Divi Elegant Themes

To add this animation, you need to add a CSS property to the parent column (column 2) settings:

perspective: 150px

Animated CTA Buttons for Divi Elegant Themes

Button settings:

Animated CTA Buttons for Divi Elegant Themes

  • Animation style: Bounce
  • Amination direction: Centered
  • Animation duration: 1500 ms
  • Animation delay: 1000 ms
  • Animation intensity: 400
  • Animation start opacity: 100%

CTA #3 – Horizontal Flip

Animated CTA Buttons for Divi Elegant Themes

The horizontal flip is similar to the vertical, with the direction as the only difference.

Same CSS code:

perspective: 150px

Animated CTA Buttons for Divi Elegant Themes

Then open the button settings and make sure the alignment is centered:

Animated CTA Buttons for Divi Elegant Themes

Button settings:

Animated CTA Buttons for Divi Elegant Themes

  • Animation style: Folding
  • Amination direction: Centered
  • Animation duration: 1500 ms
  • Animation delay: 2000 ms
  • Animation intensity: 400%
  • Animation start opacity: 100%
  • Animation speed curve: Linear

CTA #4 – Bounce + Flip

Animated CTA Buttons for Divi Elegant Themes

 

In this animation, there is a slight delay before the button drops down and bounces.

Animated CTA Buttons for Divi Elegant Themes

Column settings:

  • Animation style: Bounce
  • Amination direction: Down
  • Animation delay: 2000 ms
  • Animation start opacity: 100%

You also need to insert CSS code:

perspective: 150px;

Animated CTA Buttons for Divi Elegant Themes

Button settings:

  • Animation style: Flip
  • Amination direction: Centered
  • Animation duration: 1500 ms
  • Animation delay: 1000 ms
  • Animation intensity: 400%
  • Animation start opacity: 100%

CTA #5 – Slide down + rotation

Animated CTA Buttons for Divi Elegant Themes

Here you have to combine a slide animation with a roll animation.

Animated CTA Buttons for Divi Elegant Themes

Column settings:

  • Animation style: Slide
  • Amination direction: Down
  • Animation delay: 1000 ms
  • Animation start opacity: 100%

And some CSS code:

perspective: 150px;

Animated CTA Buttons for Divi Elegant Themes

Button settings:

  • Animation style: Roll
  • Amination direction: Down
  • Animation duration: 1500 ms
  • Animation delay: 1000 ms
  • Animation start opacity: 100%

CTA #6 – Zoom

Animated CTA Buttons for Divi Elegant Themes

Here the button transforms and uses the zoom animation.

Animated CTA Buttons for Divi Elegant Themes

Button settings:

  • Transformation scale: 175%
  • Animation style: Zoom
  • Amination direction: Centered
  • Animation duration: 1500 ms
  • Animation delay: 1000 ms
  • Animation start opacity: 100%

CTA #7 – Pulse + Zoom

Animated CTA Buttons for Divi Elegant Themes

Here we combine the zoom in and zoom out.

Animated CTA Buttons for Divi Elegant Themes

Column settings:

  • Animation style: Zoom
  • Amination direction: Centered
  • Animation duration: 1000 ms
  • Animation delay: 2000 ms
  • Animation intensity: -100%
  • Animation start opacity: 100%

Animated CTA Buttons for Divi Elegant Themes

Button settings:

  • Animation style: Zoom
  • Amination direction: Centered
  • Animation duration: 1500 ms
  • Animation delay: 1000 ms
  • Animation intensity: 50%
  • Animation start opacity: 100%

CTA #8 – Screwing 🙂

Animated CTA Buttons for Divi Elegant Themes

Here we’ll put a slide animation on the column and a 720-degree flip on the button.

Animated CTA Buttons for Divi Elegant Themes

Column settings:

  • Animation style: Slide
  • Amination Direction: Left
  • Animation duration: 2000 ms
  • Animation delay: 2000 ms
  • Animation intensity: 100%
  • Animation speed curve: Linear

Animated CTA Buttons for Divi Elegant Themes

Button settings:

  • Animation style: Flip
  • Amination direction: Centered
  • Animation duration: 2000 ms
  • Animation delay: 2000 ms
  • Animation intensity: 800%
  • Animation start opacity: 100%

Our 8 animated CTA buttons for Divi

Animated CTA Buttons for Divi Elegant Themes

Now you should have one of the following 8 results as a CTA button! We have built these in the header, but that’s not absolutely necessary of course. The buttons can be placed anywhere. Remeber what I said in the beginning of the article, though. When there’s too much spinning, bouncing and stuff going on on the screen, most likely your visitor will get a headache or a seizure. Use animations wisely!

Chrille Hedberg

Chrille Hedberg

Jag har jobbat med WordPress i dryga 10 års tid, främst på hobbynivå. Jag har blivit lite av en mästare på att knyta ihop olika tillägg för att få funktioner att lira ihop som de ska. Jag har också blivit rätt bra på det! Har nu startat ITprojekt.se främst för att hjälpa småföretagare som sitter illa till på grund av coronasituationen. Tillsammans med kollegan Martin tar vi olika uppdrag inom just området ITprojekt, men vi taggas lite extra av att kombinera teknik med försäljning. Har bakgrund från vården innan jag skolade om mig till ingenjör och sedan trillade in på bana som säljare. Jobbar nu med teknisk försäljning och är regionansvarig för motsvarande halva Sveriges yta.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Share This