Updated:

Side By Side Customizable HTML Buttons

Sep 12, 2016 | CSS Tutorial | 31 comments

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:

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.

First Column Look

These buttons will look like your settings, not mine.

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

You can change my styles if you know basic CSS.

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

You can change my styles if you know basic CSS.

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.