Divi Animated Buttons

In this post we will see another way to use the Divi buttons, in this case also with links, to give them a different style with amazing animations.

You do not have to have a high level of knowledge of css or Divi to be able to apply these effects, just follow the instructions below.

Button Effect – 1

To start, visit pages inside of your WordPress dashboard and select add new. Once the page screen has loaded, Select the big button that says Use the Divi builder. Once the Divi builder has loaded, select your column layout and add a new text module inside your preferred column, as pictured below.

Next, open the text module and inside whatever, for example “Read More”. Highlight the text that you have just written with your cursor and then select the ‘link‘ option above. Insert your desired link address into the pop-up box or alternatively just enter ‘#‘ for now.

What we’re going to do now is give that link a class name. The class name will correspond with the Divi Button CSS we will be posting below and therefore turn your link into a button that changes colour and grows.

Once you have followed those steps you should see the same HTML structure that is pictured below.

The first thing we will see is the btn class, which will be the same for the first three examples:

You can put your CSS code in Theme Options menu. Theme Options > General > Custom CSS and “Save Changes”.

The CSS Code:

Button Effect – 2

For button 2 we will do exactly the same as we did in button 1, we will follow the same steps.

In this case, for button 2 we will use the following code:

Button Effect – 3

 

For button 3 we will do exactly the same as we did in button 1, we will follow the same steps.

In this case, for button 3 we will use the following code:

Button Effect – 4

 

For our next button, we are going to use a button module, in this case the only thing we have to do is put the button title in “Button Text”.

Let’s now give it the style through CSS, for that, first what we’re going to do is give the CSS class a name. In the Button Module, go to Advanced tab and put you CSS name in “CSS Class”.

Now comes the magic of CSS:

duritzHTC Designs

In duritzHTC Designs we bet for a more modern approach to your website, whether you are a company, a developer or a WordPress user who wants to set up your blog or your online store. Spectacular effects, totally responsive, all our Divi Child Themes are designed for you to achieve your goals..

Subscribe

Follow Us

Follow us on social networks, you can find out before anyone else of all the news and discounts in our Dvi Child Themes.

 

Pin It on Pinterest

Shares
Share This