Button Button Who Got’s the Divi Button

October 31, 2018

Get Divi Now

Get the Divi theme for WordPress - the smartest, most flexible theme in the collection. With Divi, the sky’s the limit.

WordPress Divi Theme Ad Graphic - divi_728x90

Elegant Themes has been pumping out some great tutorials, but as we all know from frequenting Divi related forums most developers would rather use a plugin rather then write and understand code – am I right?

Back in October of 2018 Jason Champagne posted in Divi Resources

5 Creative Divi Button Module Designs & How to Make Them

Here then are the buttons as downloadable json files.

This is a classic button design that is sure to stand the test of time. I screwed with the colors and added a hover effect to the background and text. 

I’m not too sure about this button idea, but then I’m old. Maybe this appeals more to generation Z? Yes, I made some minor changes, can you find them?

Photoshop was used for the icon background of my button here. I decided to do a Click to Call button where on mobile devices with telephone, clicking the button should invoke the dialer to call the pre-defined number. I used the phone number of my neighbor!

Who doesn’t like a gradient button? The added right double arrow is a classy touch. Make it your own by change some parameters around, I did 🙂

No way I was going to put this glow pill button on a dark background. Well, if I had a design that warranted it I certainly would have. Don’t you think the pill shape is a timeless design?

Get Divi Now

Get the Divi theme for WordPress - the smartest, most flexible theme in the collection. With Divi, the sky’s the limit.

WordPress Divi Theme Ad Graphic - divi_728x90

DOWNLOAD

Notes

I’ve tested the json file by importing to another Divi website and discovered the arrows didn’t make the trip on localhost but were A-OK on a live site. The CSS “after” disappeared on localhost?!

The “Moving Line Button” (my ‘React’ button) picks up the website’s default button background. I noticed this behaviour when initially building the button.

ERGO use at your own risk.

mailbox email subscribe

Subscribe for Divi Freebies

Plugin update notifications :: stay abreast of new and or updated items by opting in to my very occasional email newsletter. I swear by all that is right and holy your email address will never be shared, sold, traded or otherwise abused and I seriously doubt you'll see anything more than plugin/code update notifications when they are of the utmost importance.

Tip Jar

Send a Gratuity

Your generosity is greatly appreciated 🙂


Credit Cards


Loading...

Give a Shout Out

9 + 2 =

Pin It on Pinterest