Elegant Themes Blog

Stay up to date with our most recent news and updates

Download The Free Divi Custom Button Module Design Kit

Posted on July 13, 2016 by in Divi Resources | 40 comments

Download The Free Divi Custom Button Module Design Kit

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.

divi_components_buttons

Downloading & Using The Free Divi Buttons Kit

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

save-buttons

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.

divi_components_buttons-01

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-2-6-logo

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.

Learn More About Divi 3.0


download divi

40 Comments

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

  2. I love these buttons thanks so much for creating them!

  3. 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!

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

  5. 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…

  6. I need to add tree css circles with different colours aside the button text, is this possible?

  7. Can we access this same button styles using the button shortcode?

  8. 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…

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

  10. This is very helpful for any freelancer!!

    • Amazing. 🙂

  11. 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!

  12. 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. 🙂

  13. 3rd attempt:

    New Divi Showcase Competition sounds exciting!
    And thank you ET for the great goodies you are gifting us 🙂

  14. What would be cool is a pack with all kind of menu styles and setups.

  15. You are thelepatic! I was just looking for buttons! Thank’s fro Italy

  16. Awesome

  17. 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!

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

  19. 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! 🙂

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

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

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

  23. How can I create my own Divi module, can you please give me any reference?
    Thank you!

  24. Hi Mario Maruffi,

    Really i like this Button Module Design. Cool Stylish Button and Flat Design also.
    Thanks For Sharing !!

  25. These three are nice, I really appreciate all the layouts that have been coming out,Fantastic, Thank You

  26. 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!

  27. 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!

    • Nathan B. Weller

      Yep! Between this series and Divi 3.0 itself we’ve been all hands on deck!

  28. where can we found the other 47?

  29. The folder has only the licence, the file is missing, can’t import it

Join 385,236 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today

Pin It on Pinterest

Share This