Welcome to Day 44 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!
Every website needs buttons. But creating beautiful buttons, even with the advanced design settings Divi offers, can be a challenge for some users. That’s why in today’s post we’re providing over 50 different button styles that you can save to your Divi Library and use over and over again.
- 1 Downloading & Using The Free Divi Buttons Kit
- 2 Subscribe To Download For Free
- 3 Download For Free
- 4 You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
- 5 The Divi Buttons Kit
- 6 Tomorrow: A New Divi Showcase Competition
- 7 Divi 100 Day 44
- 8 The Countdown To Divi 3.0
To use the Free Divi Button Kit on your own Divi website you will first need to download it using the button below. Next, locate the file divi-100-buttons-kit.zip in your downloads folder and unzip it. Then, navigate in your WordPress admin to Divi > Divi Library and click the “Import & Export” button at the top of the page.
When the portability modal pops up go to the import tab. Click the “choose file” button and select the Buttons Kit.json file. Then click the blue “Import Divi Builder Layout” button and wait for the import to complete.
Once the import has finished you will now have the ability to load the buttons kit as a complete layout on any builder powered page or post by going to Load From Library > Add From Library. This kit allows you to quickly and easily preview a wide selection of buttons that you can then save as individual modules to use over and over again on your website to maintain consistency.
Subscribe To Download For Free
The Divi Buttons Kit provides you with a single layout containing over 50 different button styles. Once you have decided on the buttons you would like to re-use on your site, simply save those buttons to your library as individual modules by going to that module’s settings and clicking the blue “Save & Add to Library” button.
Tomorrow: A New Divi Showcase Competition
Tomorrow Nick will be launching a new Divi Design Showcase Competition with big prizes for the best submissions. We’ll be viewing all of the sites the community has submitted to the podcast as well as any new submissions sent during the next week. Check back tomorrow for full submission details and a rundown of potential prizes.
Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!
Divi 100 Day 44
The Countdown To Divi 3.0
This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.
The folder has only the licence, the file is missing, can’t import it
where can we found the other 47?
http://www.elegantthemes.com/blog/divi-resources
These are great! Everyone at Elegant Themes must have been putting in a decent amount of work time with these 100 days of Divi. Thanks again!
Yep! Between this series and Divi 3.0 itself we’ve been all hands on deck!
Hey, my WordPress says that I cannot import the file due to Safety issues. Can you please tell me what I do wrong? Is it correct that the file is a ‘sjon’ file? Hope to here from you!
These three are nice, I really appreciate all the layouts that have been coming out,Fantastic, Thank You
Hi Mario Maruffi,
Really i like this Button Module Design. Cool Stylish Button and Flat Design also.
Thanks For Sharing !!
Fantastic, Thank You 🙂
How can I create my own Divi module, can you please give me any reference?
Thank you!
I really appreciate all the layouts that have been coming out, I really do wish you had stuck to giving us new extensions every Tuesday, that was nice. But I u deist and energy needs to go into development, most layout packs I have not been able to use just don’t fit my genre, but I’m sure many find them useful. I am hoping there will be a marketplace for layout packs and elements with neat css tweaks, really unique stuff would be great. If divi 3(which I am so looking forward to I bought a lifetime membership) provides,some of the options I hope it does, possibilities could be endless, hopefully they listened to the divi survey and are incorporating more features for developers. Who,prefer options over simplicity.
Instead of just seeing the same buttons in different colors it would be great to see different interaction effects on hover/click. Anyone should be able to easily change colors, but adding interactions is the hard part for many people.
I apologize if this has been answered – but how can we use these in the widgets where most of our buttons will be?
meaning the SIDEBAR
Oh, I was hoping for 50 different buttons! These three are nice, but would be great to see more styles on the buttons too, not just a bunch of colours. Thanks for the starting point tho! 🙂
While creating these yourself and adding them to your library is an option, I think this is great for those who need a quick out of the box solution…
With that said there is one function that Divi needs for all colour picker options, and that is –
THE ABILITY TO SAVE PALLETS!!!
It would make the workflow way better for creating buttons and background colours. How many of us need to memorize hex values or copy paste RBG info while creating custom sets in our modules? In fact I don’t know why it’s not built in.
Thank you for sharing the layout. I knew I made one of my best decissions ever when I created my DIVI account. You guys not only rock, you treat us (even noobs like me) as important “partners”. Thanks again!
Awesome
You are thelepatic! I was just looking for buttons! Thank’s fro Italy
What would be cool is a pack with all kind of menu styles and setups.
3rd attempt:
New Divi Showcase Competition sounds exciting!
And thank you ET for the great goodies you are gifting us 🙂
Thank you for that but a little question when you copy and paste:
does it mean that you have to open twice the dashboard (in parallel) to do it?
or can you copy the button
and go to another page (in the same session)
then paste.
that part is not clear enough for me
thanks
You could always……………………..try it yourself. 🙂
Oh, YES!! For some reason, the default Divi button settings (especially the rollover state) don’t work properly on my site, so I’m looking for alternatives so that I don’t have to hand-code every button!
This is very helpful for any freelancer!!
Amazing. 🙂
can i change button on contact form with this module?!
You can copy the settings to your contact form button as it has same settings.
Thank you Mario!
Gr8 to see this kit. I see the divi team heading towards a way where developers would be able to develop such kits for users to buy. Good idea for developers to design beautiful kits like these for all elements in divi, making divi a open source design platform type. Congratulations for this wonderful opening of divi platform…
Can we access this same button styles using the button shortcode?
I need to add tree css circles with different colours aside the button text, is this possible?
Thank God the buttons are not totally flat. Whoever screwed up Apples GUI should be shot at sunrise! The eyes are NOT meant to work with flat all day. Our eyes see textures and thus, if you want your GUI to be natural, there MUST be some depth and shadowing.
Flat world hurts my eyes… and at 67 I do not yet wear bifocals…
New Divi Showcase competition sounds exciting !
And thank you ET for all the goodies you are gifting us. Such an inspiring company!
A contest is great.
Nice, thanks guys!
Suggestion: Consider a color picker.
Disregard my last comment, I presumed it was an actual module. Now that I’ve installed and used it (and read all the text in this blog post : ) I see that they are layouts that can be reused as you see fit. Including a color picker.
Nice to look at the settings in these. Especially the Custom CSS.
Cheers!
Great idea!
I love these buttons thanks so much for creating them!
Really like seeing three buttons of the same color beside each other for comparison. I never really thought about the benefits of having the buttons laid out like this, will load this layout on my test site for sure.