Hello, my friend! This is the first blog post of a series about Divi custom buttons. The main objective of this series is to search for CodePen – and around the web – buttons and designs inspirations and replicate them in Divi theme. Those small hover animations are the details needed to WoW your clients and website users.

The main focus here isn’t to create cheeky button animations or too many annoying effects.

Let’s find some awesome and fancy design ideas to make your Divi website look as professional as possible.

Hope you can join me in this new learning journey over new CSS tricks and copy and paste buttons for new projects. Don’t forget to subscribe to receive all the new Divi custom buttons right into your mailbox.

Enough said, let’s start!

Divi custom buttons #1

Preview

Download

Divi Custom Buttons 1 GIF - Find & Share on GIPHY

The animation above was created by David Conner pen. He got his inspiration from Karim Balaa pen.

Why this button animation?

This button hover animation was chosen for a simple reason. It has a neat and clean look. Very professional for any kind of industry.

When you hover the mouse over it the title increase size and the border has an elegant effect. The speed of the animation is set in the CSS code to 0.6 seconds, but you can change this value to better suit your needs.

How to add this button hover animation in Divi

I always like to work with Divi as a framework. I copy and paste lots of CSS and classes inside Text Modules and Code Modules.

If you don’t know how to create a custom button with code yet, check out this tutorial.

First, add the following code inside Divi Theme Options > Custom CSS:

/* http://codepen.io/davidicus/pen/emgQKJ */
.btn-1, .btn-1 svg, .btn-1 rect, .btn-1:hover {
transition: all .6s ease;
}
.btn-1 {
color: #fff;
cursor: pointer;
display: block;
font-size: 16px;
font-weight: 400;
line-height: 45px;
margin: 20px auto;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
background: none;
font-weight: 100;
}
.btn-1 svg {
height: 45px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.btn-1 rect {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-dasharray: 422, 0;
}
.btn-1:hover {
font-weight: 900;
letter-spacing: 1px;
}
.btn-1:hover rect {
stroke-width: 5;
stroke-dasharray: 15, 310;
stroke-dashoffset: 48;
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

Then, create a code module and add the following code inside of it:

<a href="#" class="btn-1">
<svg><rect x="0" y="0" fill="none" width="100%" height="100%"></rect></svg>Request Quote</a>

You’ll see that the text of the button is not aligned to the center. To fix this, go to the Row Setting and add this CSS code:

text-align: center;

Conclusion

What do you think of this kind of series? I think it’s great because you can have a place to come and find new design ideas for the submit buttons design of your Divi website forms, or even call to actions.

If you liked and used this idea into one of your projects, leave a message with the link so I can check it. I’m curious already!

I really hope you liked it. Stay tuned for more tutorials and freebies.

See ya!