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?
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?
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.
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.