Do you know how to create custom button on Divi theme?

I

know this is a simple css tutorial, but I would’ve been glad to find this information earlier. When you start learning more and more about CSS and JS you will find – sooner or later – the necessity to learn how to create a custom button o Divi theme.

One of many advantages of having custom buttons in your site is to add more functionalities to it. You can set tooltip information, add JS libraries with ease and more.

So, lets start!

First, create a code module and put this code in it.

<button>Button</button>

Yeah! You successfully create a html button. It may look like this:

But, this is looking so “default” isn’t it? This button looks fine because I am using the Extra theme, and it is getting the default properties for the buttons.

Lets try creating a button with the <a> tag.

<a href="#">Button</a>

 This version 1.0 of the button will look like this.

Button

Ok, this is not a button at all. That is why we need to add a class and style it with CSS to start creating the button that we want.

<a href="#" class="btn">Button</a>

Lets start styling the CSS of the class btn. This “btn” is commonly used when targeting buttons in general, but you can put the name you want on it. It is your creation, after all.

Add the following code to the Divi > Theme Options > Custom CSS.

.btn {
border: 2px solid #000000;
}

This version 1.1 of the button will look like this.

Button

This button is not good at all! Lets add some changes! Lets increase the padding and border size.

.btn {
border: 5px solid #000000;
padding: 15px;
}

Button

This version 2.0 of the button will look like this.

Finally, lets fix the padding, add some background and hover animations.

Remember: you can use the code module or the text editor to create custom buttons. Do not use the visual editor, as it may mess the code.

.btn {
  border: 5px solid #000000;
  padding: 8px 12px;
  color: #000000;
  background: transparent;
  position: relative;
  bottom: 0;
  transition: .3s;
}

.btn:hover {
  border: 5px solid #000000;
  color: #FFFFFF;
  background: #3F51B5;
  position: relative;
  bottom: 5px;
  transition: .3s;
}

Button

This version 3.0 of the button will look like this.

Conclusion

Do you create your custom buttons already? This is a common practice once you start using lots of jQuery plugins to your site.

The next tutorials will focus on what you can manage to do with this custom created buttons. Hope to help you! Got any questions? Feel free to add a comment or contact me.

See ya!