Side By Side Customizable HTML Buttons

Sep 12, 2016 | CSS Tutorial | 26 comments

Divi’s button modules are great, but sometimes you want them side by side in the same column. The specialty section can be a solution in some cases but I prefer just using some simple HTML and CSS to do this. There are other guides to achieving this that are just as good, this is just my preferred method.

Note: You can use the code for look two and three 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

How to achieve this:

screen-shot-2016-09-12-at-6-57-19-pm

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, but you can always tweak your font sizes using media queries if you’re creating your own custom classes.

First Column Look

These buttons will look like your settings, not mine.
Divi Tutorial | A Girl and Her Mac

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;
}

Second Column Look

You can change my styles if you know basic CSS.
Divi Tutorial | A Girl and Her Mac

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;
    background: #b06f97;
    color: #333;
    font-size: 1.5em;
    font-family: ‘Georgia’, serif;
    font-style: italic;
    border-radius: 50px;
    padding: 8px 16px;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.my-button:hover {
    background: #666;
    color: #c1e1e0;
}

Third Column Look

You can change my styles if you know basic CSS.
Divi Tutorial | A Girl and Her Mac

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;
}
.button-two {
    background: #f15640;
}
.button-three {
    background: #27c9b8;
}
.button-one,
.button-two,
.button-three {
    color: #1d1d1d;
    display: inline-block;
    border-radius: 0;
    padding: 10px 18px;
    text-transform: uppercase;
    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.