Side By Side Customizable HTML Buttons
Divi’s button modules are great, but sometimes you want them side by side in the same column, or maybe you just need a whole row of several buttons. The specialty section can be a solution in some cases but I prefer just using some simple HTML and CSS to do this.
These code snippets are starting points, all you need to do is tweak the colors, rounded corners, and whatever else to match your site’s look. Anything you don’t want you can just delete that line.
If you’re needing to make simple HTML buttons my code snippets for looks two and three will work on any website, not just Divi and not just WordPress.
About the button styles
- the first column uses ET’s own class
- the second column is using a custom class
- the third column is using a custom class (the only thing I’m really doing differently here is not setting a margin, so the buttons are touching)
How to achieve this:
I’m using a 3 column layout with the row set to fullwidth but you can use whatever layout you’d like. Keep in mind on a 4 column layout the buttons may break into more than one line depending on the amount of characters in your button text.
First Column Look
In the first column I’m using ET’s own class “et_pb_button”. Your buttons will take on the styling that you’ve already set in the customizer, easy peasy.
The only CSS that’s needed is to ensure the buttons look good on mobile. The HTML code goes in your text module while in text mode (or you can use a code module if you prefer), the CSS goes in your Divi options CSS box or your child stylesheet.
html code
<a class="et_pb_button" title="Relevant Title" href="#">click me</a><a class="et_pb_button" title="Relevant Title" href="#">no click me</a><a class="et_pb_button" title="Relevant Title" href="#">no me lol</a>
css code
.et_pb_button {
display: inline-block;
margin: 5px; /* space between buttons */
}Second Column Look
In the second column I’ve styled the buttons myself giving them the class name “my-button”. This is a starting point for you to change the code bits to what you’d like.
The HTML code goes in your text module while in text mode (or you can use a code module if you prefer), the CSS goes in your Divi options CSS box or your child stylesheet.
html code
<a class="my-button" title="Relevant Title" href="#">Click Me</a><a class="my-button" title="Relevant Title" href="#">No Click Me</a>
css code
.my-button {
display: inline-block;
margin: 5px; /* space between buttons */
background: #b06f97; /* background color */
color: #333; /* text color */
font-size: 1.5em;
font-family: ‘Georgia’, serif;
font-style: italic;
border-radius: 50px; /* rounded corners */
padding: 8px 16px; /* space around text */
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.my-button:hover {
background: #666;
color: #c1e1e0;
}Third Column Look
In the third column I’ve styled the buttons myself giving each it’s own class so they can have their own styles — “button-one” “button-two” “button-three”. This is a starting point for you to change the code bits to what you’d like.
The HTML code goes in your text module while in text mode (or you can use a code module if you prefer), the CSS goes in your Divi options CSS box or your child stylesheet.
html code
<a class="button-one" title="Relevant Title" href="#">Click Me</a><a class="button-two" title="Relevant Title" href="#">No Click Me</a><a class="button-three" title="Relevant Title" href="#">No Me LOL</a>
css code
.button-one {
background: #edf000; /* background color */
}
.button-two {
background: #f15640;
}
.button-three {
background: #27c9b8;
}
.button-one,
.button-two,
.button-three {
color: #1d1d1d; /* text color */
display: inline-block;
border-radius: 0; /* square corners */
padding: 10px 18px; /* space around text */
text-transform: uppercase; /* all capital letters */
font-weight: 700;
letter-spacing: 1px;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.button-one:hover,
.button-two:hover,
.button-three:hover {
background: #fff;
}Notes
- The HTML code goes in your text module while in text mode (or you can use a code module if you prefer), the CSS goes in your Divi options CSS box or your child stylesheet.
- If you know basic CSS you can modify my styles as you’d like. If you modify CSS for the “et_pb_button” class you may override your customizer settings.
- I’ve only added the link, title and class but you can add the target, alt, whatever else you’d like.
- It is more semantically correct to use <button> instead of <a> so you can change those if you’d like, but the first Divi example will not work.
I am so loving this tutorial layout!! Fantastic job on the code as well.
Wahoo!! Thanks!! <3
I just reduced the code more, I had a teency bit more than I needed lol
Such a great simple tut! Thanks!!
Thank you!
Thank you for sharing your knowledge with us!
Thanks Leif!! 😀
This is super helpful and solves a question I have had for a while! Is there a way to make the buttons stay (not go responsive), almost like a 3 button navigation?
Hi Hannah!! Glad it helped 😀
Hmm I’m not sure I know what you mean. I did recently put out a different tutorial on using ET shortcodes with buttons and on mobile all the buttons will stay inline instead of go stacked, not sure if that’s what you mean but you may want to check it out.
https://agirlandhermac.design/using-ets-shortcodes-to-add-extra-columns/
Sorry I’m just now replying to this! I never knew you responded back..ugh!
I’m really looking for multiple buttons in navigation header (vs. just having a menu option) Like this example on buckner.org
https://www.dropbox.com/s/9batrgxeo9qoypk/Buckner%20Side%20by%20Side.JPG?dl=0
Thanks for your response!
I’m sorry, I really need to add some sort of alert option for follow-up comments but I just really hate the one that comes with jetpack.
I really like that example! I’ve not ever tried to do that with the Divi honestly, it’s mobile menu can be a bit of a pain in the butt to style lol, but I’m sure that it can be done. I saw that you emailed me so I’ll respond further there 🙂
Hey Leslie
Thanks for this. I must be missing something. I followed your instructions but don’t see the colors showing up. Maybe another CSS class is overriding this?
https://www.screencast.com/t/SVl37zaa
Thanks.
Yeah, definitely a ‘me’ issue.
https://www.screencast.com/t/iGMow6XlEA
Fresh install via http://poopy.life. (Terrible name but useful site.)
Lol, glad you got it sorted!!
Awesome tutorial Leslie! This really helped me out. 🙂
Thanks so much Noelle!! <3
Thankyou very much for the tutorial. I’ve seen a few of these, but yours is the only one that works reliably (and very simply too)
Hey thanks David! Glad it helped 😀
Is it possible to align 5 buttons together?
Hi Shandell! Yes you can do five, you’d probably have to use one column, and once the screen starts getting smaller they will automatically stack depending on how many characters are in your buttons, but it is possible using this method.
IS there anyway to add an html code to the button module? I want to add an online menu that has an html code but I can’t seem to be able to figure out a way to add it the button module. Any help would be great.
Thanks
Hi Amit! I’m not sure I’m understanding the question. Do you have code from some type of menu software that you need to add to a button somehow?
Yes I have a HTML code that I would like to add to the Divi button module that I can add throughout the site.
Email me at agirlandhermac@gmail.com. I’ll need to take a look at the code to see if I can help 🙂
thanks, it’s working nicely.
That’s great, thanks Manoj! 😀
Wondering if you can explain how to get the buttons to be equal min-width and not dependent on the text length? I’ve tried using this custom css below with the class .cta-width on the button modules, but it’s not working for me.
.cta-width .et_pb_button { min-width: 300px; text-align:center; }
Hi Aimee! If I’m understanding correctly try going to advanced > main element in the button module and put
width: 100%;
If it’s a CTA module put that in the advanced > button section
I actually did figure this out before hearing back! width 100%; in the advanced tab in the main element worked great! Thanks for replying.
Hello!
For the third column look, how do you make the buttons hover colors different?
I tried this but it didn’t seem to work…:
.button-one: hover {
background: #ff5454;
}
.button-two: hover {
background: #609dff;
}
Hi Daniel! You’re really close, just remove the spaces before “hover” so it looks like this
.button-one:hover {
background: #ff5454;
}