How to create cool custom buttons for the Divi wordpress theme

Post By : Jim Monkhouse
Posted in : Design | Tutorials
Are you bored by divi themes existing button modules? In this post I’m going to show you a quick and simple method on how to create custom divi buttons with incredible animated hover effects to engage your website visitors. Let’s ditch the boring default buttons and create something truly unique for your divi website … your website deserves it!

Adding custom buttons to divi is easy

We all know how important buttons are in web design, buttons are the feature of your website that encourages users to take action, which is why it’s incredibly important to have buttons which not only perform as clear call to actions but have unique and engaging design. Having a custom designed button can increase your website’s perceived quality and trustworthiness helping you get more conversions and repeat visitors.

As great as it is, sometimes the default divi button module can feel a bit generic and limited and make your website feel like just another stock divi website. However with basic knowledge of HTML and CSS and some copy and pasting you can take inspiration from existing examples of button hover effects and add them to your divi website to create a truly unique and show stopping button. 

How to create cool custom buttons for the Divi wordpress theme 1

Let’s create your cool custom buttons for divi

Before we start this tutorial I’d just like to give a massive shout out to codrops blog, which Is central to this custom divi buttons tutorial. Codrops is an incredible resource for web design inspiration, so I highly recommend booking marking it, following the socials and giving it some love. 

Also I recommend watching the accompanying youtube video for this blog post to give yourself a through understanding of how to set up the custom divi buttons.

1. Get the code for your custom buttons

Navigate to the following URL in your browser https://tympanus.net/codrops/2021/02/17/ideas-for-css-button-hover-animations/

Click Github and then on the github page click the green code button and then click the Download Zip link

Expand the Zip file and drop it into your favourite text editor

Open the CSS file base.css in your test editor.  We’re going to remove all CSS which isn’t related to the buttons, you can copy and paste this css code block which is just underneath. Once you’ve edited and copied the CSS code, paste it into divi Theme options custom CSS. 

Divi > Theme Options > Custom CSS (scroll to the bottom)

How-to-create-cool-custom-buttons-for-the-Divi-wordpress-theme-custom-css

.button {
pointer-events: auto;
cursor: pointer;
background: #e7e7e7;
border: none;
padding: 1.5rem 3rem;
margin: 0;
font-family: inherit;
font-size: inherit;
position: relative;
display: inline-block;
}

.button::before,
.button::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.button–pan {
font-family: aktiv-grotesk-extended, sans-serif;
font-weight: 700;
border: 2px solid #000;
border-radius: 3rem;
overflow: hidden;
color: #fff;
}

.button–pan span {
position: relative;
mix-blend-mode: difference;
}

.button–pan::before {
content: ”;
background: #000;
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.button–pan:hover::before {
transform: translate3d(0,-100%,0);
}

.button–hyperion {
font-family: input-mono-narrow, monospace;
font-weight: 500;
padding: 1rem 1.5rem;
border: 1px solid #000;
overflow: hidden;
color: #fff;
}

.button–hyperion span {
display: block;
position: relative;
}

.button–hyperion > span {
overflow: hidden;
}

.button–hyperion > span > span {
overflow: hidden;
mix-blend-mode: difference;
}

.button–hyperion:hover > span > span {
animation: MoveUpInitial 0.2s forwards, MoveUpEnd 0.2s forwards 0.2s;
}

@keyframes MoveUpInitial {
to {
transform: translate3d(0,-105%,0);
}
}

@keyframes MoveUpEnd {
from {
transform: translate3d(0,100%,0);
}
to {
transform: translate3d(0,0,0);
}
}

.button–hyperion::before {
content: ”;
background: #000;
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
transform-origin: 100% 50%;
}

.button–hyperion:hover::before {
transform: scale3d(0,1,1);
transform-origin: 0% 50%;
}

.button–mimas {
text-transform: uppercase;
letter-spacing: 0.05rem;
font-weight: 700;
font-size: 0.85rem;
border-radius: 0.5rem;
overflow: hidden;
color: #fff;
background: #e7e7e7;
}

.button–mimas span {
position: relative;
mix-blend-mode: difference;
}

.button–mimas::before {
content: ”;
background: #000;
width: 120%;
left: -10%;
transform: skew(30deg);
transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.button–mimas:hover::before {
transform: translate3d(100%,0,0);
}

.button–atlas {
font-family: signo, sans-serif;
font-weight: 500;
}

.button–atlas > span {
display: inline-block;
}

.button–atlas:hover > span {
opacity: 0;
}

.marquee {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
pointer-events: none;
}

.marquee__inner {
width: fit-content;
display: flex;
position: relative;
–offset: 1rem;
–move-initial: calc(-25% + var(–offset));
–move-final: calc(-50% + var(–offset));
transform: translate3d(var(–move-initial), 0, 0);
animation: marquee 1s linear infinite;
animation-play-state: paused;
opacity: 0;
}

.button–atlas:hover .marquee__inner {
animation-play-state: running;
opacity: 1;
transition-duration: 0.4s;
}

.marquee span {
text-align: center;
white-space: nowrap;
font-style: italic;
padding: 1.5rem 0.5rem;
}

@keyframes marquee {
0% {
transform: translate3d(var(–move-initial), 0, 0);
}

100% {
transform: translate3d(var(–move-final), 0, 0);
}
}

.button–kari {
font-family: freight-display-pro, serif;
font-weight: 900;
font-size: 1.25rem;
border-radius: 50%;
border: 2px solid #000;
}

.button–kari > span {
display: inline-block;
transition: opacity 0.1s;
}

.button–kari:hover > span {
opacity: 0;
}

.button–kari .marquee {
transform: rotate(-2.75deg);
}

.button–kari:hover .marquee__inner {
animation-play-state: running;
opacity: 1;
transition-duration: 0.6s;
}

.button–pandora {
background: #000;
font-weight: 700;
padding: 0;
border-radius: 5px;
}

.button–pandora span {
display: block;
background: #a7a7a7;
padding: 1.5rem 2rem;
border: 1px solid #000;
border-radius: 5px;
transform: translate3d(-4px, -4px, 0);
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.button–pandora:hover span {
transform: translate3d(-8px, -8px, 0);
}

.button–janus {
font-family: freight-display-pro, serif;
font-weight: 900;
width: 175px;
height: 120px;
color: #fff;
background: none;
}

.button–janus::before {
content: ”;
background: #e6e6e6;
-webkit-clip-path: path(“M154.5,88.5 C131,113.5 62.5,110 30,89.5 C-2.5,69 -3.5,42 4.5,25.5 C12.5,9 33.5,-6 85,3.5 C136.5,13 178,63.5 154.5,88.5 Z”);
clip-path: path(“M154.5,88.5 C131,113.5 62.5,110 30,89.5 C-2.5,69 -3.5,42 4.5,25.5 C12.5,9 33.5,-6 85,3.5 C136.5,13 178,63.5 154.5,88.5 Z”);
transition: clip-path 0.5s cubic-bezier(0.585, 2.5, 0.645, 0.55), -webkit-clip-path 0.5s cubic-bezier(0.585, 2.5, 0.645, 0.55), background 0.5s ease;
}

.button–janus:hover::before {
background: #000;
-webkit-clip-path: path(“M143,77 C117,96 74,100.5 45.5,91.5 C17,82.5 -10.5,57 5.5,31.5 C21.5,6 79,-5.5 130.5,4 C182,13.5 169,58 143,77 Z”);
clip-path: path(“M143,77 C117,96 74,100.5 45.5,91.5 C17,82.5 -10.5,57 5.5,31.5 C21.5,6 79,-5.5 130.5,4 C182,13.5 169,58 143,77 Z”);
}

.button–janus::after {
content: ”;
height: 86%;
width: 97%;
top: 5%;
border-radius: 58% 42% 55% 45% / 56% 45% 55% 44%;
border: 1px solid #000;
transform: rotate(-20deg);
z-index: -1;
transition: transform 0.5s cubic-bezier(0.585, 2.5, 0.645, 0.55);
}

.button–janus:hover::after {
transform: translate3d(0,-5px,0);
}

.button–janus span {
display: block;
transition: transform 0.3s ease;
mix-blend-mode: difference;
}

.button–janus:hover span {
transform: translate3d(0,-10px,0);
}

.button–anthe {
font-family: bely-display, sans-serif;
color: #fff;
background: none;
}

.button–anthe::before {
content: ”;
background: #000;
-webkit-clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 0% 100%);
transition: clip-path 0.4s cubic-bezier(0.2, 1, 0.8, 1), -webkit-clip-path 0.4s cubic-bezier(0.2, 1, 0.8, 1);
}

.button–anthe:hover::before {
background: #000;
-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.button–anthe span {
display: block;
mix-blend-mode: difference;
transition: transform 0.4s cubic-bezier(0.2, 1, 0.8, 1);
}

.button–anthe:hover span {
transform: translate3d(-10px,0,0);
}

.button–pallene {
font-family: aktiv-grotesk-extended, sans-serif;
font-weight: 700;
border-radius: 0.5rem;
border: 2px solid #000;
box-shadow: inset 0 0 0 0px #000;
transition: border-radius 0.3s, box-shadow 0.3s, color 0.3s;
transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}

.button–pallene:hover {
color: #e7e7e7;
border-radius: 50%;
box-shadow: inset 0 0 0 40px #000;
transition-delay: 0s, 0s, 0.2s;
}

.button–telesto {
overflow: hidden;
font-family: obvia, sans-serif;
font-weight: 800;
font-style: italic;
font-size: 1.15rem;
color: #fff;
}

.button–telesto span {
display: block;
position: relative;
z-index: 1;
}

.button–telesto > span {
overflow: hidden;
mix-blend-mode: difference;
}

.button–telesto:hover > span > span {
animation: MoveRightInitial 0.1s forwards, MoveRightEnd 0.3s forwards 0.2s;
}

@keyframes MoveRightInitial {
to {
transform: translate3d(105%,0,0);
}
}

@keyframes MoveRightEnd {
from {
transform: translate3d(-100%,0,0);
}
to {
transform: translate3d(0,0,0);
}
}

.button–telesto::before,
.button–telesto::after {
content: ”;
background: #000;
}

.button–telesto::before {
width: 135%;
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%);
transform: translate3d(-100%,0,0);
}

.button–telesto:hover::before {
transform: translate3d(0,0,0);
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.button–telesto::after {
width: 105%;
transform: translate3d(100%,0,0);
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.button–telesto:hover::after {
transform: translate3d(0,0,0);
transition: transform 0.01s 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.button–calypso {
overflow: hidden;
font-family: freight-display-pro, serif;
font-size: 1.15rem;
border-radius: 0.85rem;
color: #fff;
}

.button–calypso span {
display: block;
position: relative;
mix-blend-mode: difference;
z-index: 10;
}

.button–calypso:hover span {
animation: MoveScaleUpInitial 0.3s forwards, MoveScaleUpEnd 0.3s forwards 0.3s;
}

@keyframes MoveScaleUpInitial {
to {
transform: translate3d(0,-105%,0) scale3d(1,2,1);
opacity: 0;
}
}

@keyframes MoveScaleUpEnd {
from {
transform: translate3d(0,100%,0) scale3d(1,2,1);
opacity: 0;
}
to {
transform: translate3d(0,0,0);
opacity: 1;
}
}

.button–calypso::before {
content: ”;
background: #000;
width: 120%;
height: 0;
padding-bottom: 120%;
top: -110%;
left: -10%;
border-radius: 50%;
transform: translate3d(0,68%,0) scale3d(0,0,0);
}

.button–calypso:hover::before {
transform: translate3d(0,0,0) scale3d(1,1,1);
transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.button–calypso::after {
content: ”;
background: #000;
transform: translate3d(0,-100%,0);
transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.button–calypso:hover::after {
transform: translate3d(0,0,0);
transition-duration: 0.05s;
transition-delay: 0.4s;
transition-timing-function: linear;
}

.button–skoll {
overflow: hidden;
border-radius: 50%;
color: #fff;
width: 100px;
height: 100px;
padding: 0;
font-weight: 500;
}

.button–skoll span {
display: block;
position: relative;
}

.button–skoll > span {
overflow: hidden;
mix-blend-mode: difference;
}

.button–skoll:hover > span > span {
animation: MoveUpInitial 0.2s forwards, MoveUpEnd 0.2s forwards 0.2s;
}

.button–skoll::before {
content: ”;
background: #000;
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 50%;
transform: translate3d(0,0,0);
transition: transform 0.3s;
transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}

.button–skoll:hover::before {
transform: translate3d(0,100%,0);
}

.button–greip {
overflow: hidden;
color: #fff;
font-family: input-mono-narrow, monospace;
font-weight: 500;
padding: 1rem 2rem;
}

.button–greip span {
display: block;
position: relative;
}

.button–greip > span {
overflow: hidden;
mix-blend-mode: difference;
}

.button–greip:hover > span > span {
animation: MoveUpInitial 0.2s forwards, MoveUpEnd 0.2s forwards 0.2s;
}

.button–greip::before {
content: ”;
background: #000;
width: 100%;
height: 100%;
transform-origin: 50% 100%;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
transition: clip-path 0.2s, -webkit-clip-path 0.2s;
transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}

.button–greip:hover::before {
transition-duration: 0.3s;
-webkit-clip-path: polygon(0 0, 100% 0, 0 0, 0% 100%);
clip-path: polygon(0 0, 100% 0, 0 0, 0% 100%);
}

.button–dione {
background: none;
font-family: obvia, sans-serif;
font-weight: 500;
font-style: italic;
padding: 1.5rem 3rem;
}

.button–dione span {
display: inline-block;
position: relative;
color: #fff;
}

.button–dione::before {
content: ”;
background: #000;
transition: transform 0.3s cubic-bezier(0.2,1,0.7,1);
}

.button–dione:hover::before {
transform: scale3d(0.9, 0.8, 1);
}

.button–dione::after {
content: ”;
border: 1px solid #000;
transition: transform 0.3s cubic-bezier(0.2,1,0.7,1);
border-radius: 0px;
transform: scale3d(0.85, 0.65, 1);
}

.button–dione:hover::after {
transform: scale3d(1,1,1);
}

.button–helene {
border-radius: 7px;
border: 1px solid #000;
font-family: chapman-extended, sans-serif;
font-weight: 900;
font-style: normal;
text-transform: uppercase;
font-size: 0.85rem;
padding: 0 3rem;
height: 4rem;
}

.button–helene::before {
content: ”;
top: 10px;
left: 10px;
width: calc(100% – 20px);
height: calc(100% – 20px);
background: rgba(0,0,0,0.5);
filter: blur(7px);
border-radius: 7px;
z-index: -1;
transform: translate3d(0,15px,0);
transition: transform 0.45s;
}

.button–helene:hover::before {
transform: translate3d(0,0,0);
}

.button–helene span {
display: block;
}

.button–helene > span {
height: 100%;
overflow: hidden;
line-height: 4rem;
}

.button–helene:hover > span > span {
animation: slotMachine 0.15s ease-out forwards 3;
}

@keyframes slotMachine {
50% {
transform: translate3d(0,100%,0);
opacity: 0;
}
51% {
transform: translate3d(0,-100%,0);
opacity: 0;
}
100% {
transform: translate3d(0,0,0);
opacity: 1;
}
}

.button–rhea {
font-family: freight-display-pro, serif;
font-weight: 900;
font-style: normal;
width: 180px;
height: 180px;
color: #000;
background: none;
}

.button–rhea::before {
content: ”;
z-index: -1;
background: #e7e7e7;
-webkit-clip-path: polygon(20% 30%, 0 30%, 0 50%, 0 70%, 20% 70%, 50% 70%, 80% 70%, 100% 70%, 100% 50%, 100% 30%, 80% 30%, 50% 30%);
clip-path: polygon(20% 30%, 0 30%, 0 50%, 0 70%, 20% 70%, 50% 70%, 80% 70%, 100% 70%, 100% 50%, 100% 30%, 80% 30%, 50% 30%);
transition: clip-path 0.4s cubic-bezier(0.3, 1, 0.2, 1), -webkit-clip-path 0.4s cubic-bezier(0.3, 1, 0.2, 1), transform 0.4s cubic-bezier(0.3, 1, 0.2, 1), background 0.4s ease;
}

.button–rhea:hover::before {
background: #000;
transform: scale3d(0.7,0.7,1);
-webkit-clip-path: polygon(30% 10%, 10% 30%, 30% 50%, 10% 70%, 30% 90%, 50% 70%, 70% 90%, 90% 70%, 70% 50%, 90% 30%, 70% 10%, 50% 30%);
clip-path: polygon(30% 10%, 10% 30%, 30% 50%, 10% 70%, 30% 90%, 50% 70%, 70% 90%, 90% 70%, 70% 50%, 90% 30%, 70% 10%, 50% 30%);
}

.button–rhea span {
display: block;
transition: transform 0.4s cubic-bezier(0.3, 1, 0.2, 1), opacity 0.05s;
}

.button–rhea:hover span {
transform: scale3d(0.1,0.1,1);
opacity: 0;
transition-delay: 0s, 0.35s;
}

.button–narvi {
font-weight: bold;
background: none;
}

.button–narvi::before {
content: ”;
z-index: -1;
background: #e7e7e7;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 85% 70%, 80% 70%, 75% 70%, 0 70%);
clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 85% 70%, 80% 70%, 75% 70%, 0 70%);
transition: clip-path 0.3s cubic-bezier(0.7, 0, 0.2, 1), -webkit-clip-path 0.3s cubic-bezier(0.7, 0, 0.2, 1), transform 0.3s ease;
}

.button–narvi:hover::before {
transform: translate3d(0,-10px,0);
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 85% 70%, 86% 100%, 75% 70%, 0 70%);
clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 85% 70%, 86% 100%, 75% 70%, 0 70%);
}

.button–narvi span {
display: block;
position: relative;
}

.button–narvi > span {
transition: transform 0.3s;
transform: translate3d(0,-0.556rem,0);
z-index: 1;
overflow: hidden;
}

.button–narvi:hover > span {
transform: translate3d(0,-1.111rem,0);
}

.button–narvi:hover > span > span {
animation: MoveUpInitial 0.15s forwards, MoveUpEnd 0.15s forwards 0.15s;
}

.button–hati {
border-radius: 50%;
overflow: hidden;
border: 2px solid;
background: none;
font-family: aktiv-grotesk-extended, sans-serif;
font-weight: 900;
font-style: italic;
}

.button–hati:hover {
background: none;
}

.button–hati::before {
animation: rotateIt 10s linear infinite;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAUElEQVQoU3VPSQ4AMQiS/z/aBiMNNDNeXEBQoDL66dkG52/hzlmsSqMKrAVCoOXuxR3TFVSIIJmzsFvGOMlust3iivmQd/6+3/NlN4paIOEADPIUD/MQvy0AAAAASUVORK5CYII=);
content: ”;
width: 300%;
height: 300%;
top: -100%;
left: -100%;
z-index: -1;
opacity: 0;
transform-origin: 50% 50%;
transition: opacity 0.3s;
}

@keyframes rotateIt {
to {
transform: rotate(-360deg);
}
}

.button–hati:hover::before {
opacity: 0.7;
}

.button–hati span {
display: block;
position: relative;
z-index: 1;
}

.button–bestia {
font-family: freight-display-pro, serif;
font-size: 1.15rem;
color: #fff;
background: none;
padding: 0;
}

.button–bestia .button__bg {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background: #e7e7e7;
border-radius: 0.85rem;
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.button–bestia:hover .button__bg {
transform: scale3d(1.2,1.2,1);
}

.button–bestia .button__bg::before,
.button–bestia .button__bg::after {
content: ”;
position: absolute;
background: #000;
}

.button–bestia .button__bg::before {
width: 110%;
height: 0;
padding-bottom: 110%;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate3d(-50%,-50%,0) scale3d(0,0,1);
}

.button–bestia:hover .button__bg::before {
transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
transform: translate3d(-50%,-50%,0) scale3d(1,1,1);
}

.button–bestia .button__bg::after {
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s;
}

.button–bestia:hover .button__bg::after {
opacity: 1;
transition-duration: 0.01s;
transition-delay: 0.3s;
}

.button–bestia span {
display: block;
position: relative;
padding: 1.5rem 3rem;
mix-blend-mode: difference;
}

/* Made with the help of Amelia Bellamy-Royds’ article “Perfecting Paths for “:
https://oreillymedia.github.io/Using_SVG/extras/ch07-textpaths.html */

.button–surtur {
padding: 0;
background: none;
-webkit-clip-path: circle(40% at 50% 50%);
clip-path: circle(40% at 50% 50%);
}

.button–surtur:focus-visible {
background: #443ffc;
}

.textcircle {
position: relative;
display: block;
width: 200px;
}

.textcircle text {
font-size: 32px;
text-transform: uppercase;
fill: #000;
}

.textcircle textPath {
letter-spacing: 17px; /* Firefox needs this */
}

.button–surtur:hover .textcircle {
animation: rotateIt 7s linear infinite;
}

.eye {
position: absolute;
z-index: 2;
width: 60px;
height: 60px;
top: calc(50% – 30px);
left: calc(50% – 30px);
}

.eye__outer,
.eye__inner,
.eye__lashes-up,
.eye__lashes-down {
stroke: #000;
fill: none;
stroke-width: 1.5px;
}

.eye__lashes-down {
opacity: 0;
}

.button–surtur:hover .eye__lashes-up,
.button–surtur:hover .eye__inner,
.button–surtur:hover .eye__iris {
animation: blinkHide 2s step-end infinite;
}

.button–surtur:hover .eye__lashes-down {
animation: blinkShow 2s step-end infinite;
}

@keyframes blinkHide {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
}

@keyframes blinkShow {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
}

.button–fenrir {
background: none;
padding: 0;
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
width: 120px;
height: 120px;
font-family: aktiv-grotesk-extended, sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 0.85rem;
}

.progress {
position: absolute;
width: 80px;
height: 80px;
top: calc(50% – 40px);
left: calc(50% – 40px);
transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.button–fenrir:hover .progress {
transform: scale3d(1.2, 1.2, 1);
}

.progress__circle,
.progress__path {
fill: none;
stroke: #f0f0f0;
stroke-width: 1px;
}

.button–fenrir:focus-visible .progress__circle {
fill: rgba(252,196,63,0.4);
}

.progress__path {
stroke: #a6a6a6;
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.button–fenrir:hover .progress__path {
stroke-dashoffset: 0;
}

2. Apply your custom divi buttons to page

The next step is to add your desired button from the tutorial to your divi website page. You’ll need to locate the class name of your button by right clicking on it and inspecting it using chrome dev tools (or the debugging tools of whichever browser you use). This way you can easily locate and copy the class name of the button and then pull the HTML code for the button you want directly from the index.html file, so it’s ready to paste into divi.

Open the demo link either from your local HTML file or the article which is located here.

Right click in the browser and inspect element > Click the square with a cursor icon in the top left of the inspector window > Hover over the button you like and you’ll see the class name appear > Click the button and you should then be able to highlight and copy the class name from the browser dev tools inspector panel.

Navigate to the index.html file and cmd + F and paste the classname into the text editor. You should now have found your button code, so you just need to copy that. Make sure you copy the HTML from the opening button tag <button> to the closing </button> tag. 

Now you need to add your custom divi button to your website. 

When adding the button make sure you use the divi code module as this will ensure that any excess formatting is removed and give you a clean base to work with. 

You should now see your button appear in your desired location fully formatted!

<button class=”button button–pan”><span>Upload</span></button>

<button class=”button button–hyperion”><span><span>New page</span></span></button>

<button class=”button button–mimas”><span>Render</span></button>

<button class=”button button–atlas”>
<span>Subscribe</span>
<div class=”marquee” aria-hidden=”true”>
<div class=”marquee__inner”>
<span>Subscribe</span>
<span>Subscribe</span>
<span>Subscribe</span>
<span>Subscribe</span>
</div>
</div>
</button>

<button class=”button button–kari”>
<span>Send Love</span>
<div class=”marquee” aria-hidden=”true”>
<div class=”marquee__inner”>
<span>Send Love</span>
<span>Send Love</span>
<span>Send Love</span>
<span>Send Love </span>
</div>
</div>
</button>

<button class=”button button–pandora”><span>Activate Card</span></button>

<button class=”button button–janus”><span>Reshape</span></button>

<button class=”button button–anthe”><span>Initialize</span></button>

<button class=”button button–pallene”>Hide Details</button>

<button class=”button button–telesto”><span><span>Verify</span></span></button>

<button class=”button button–calypso”><span>Export File</span></button>

<button class=”button button–skoll”><span><span>Add</span></span></button>

<button class=”button button–greip”><span><span>Next</span></span></button>

<button class=”button button–dione”><span>Resize</span></button>

<button class=”button button–helene”><span><span>Sell</span></span></button>

<button class=”button button–rhea”><span>Delete</span></button>

<button class=”button button–narvi”><span><span>Open chat</span></span></button>

<button class=”button button–hati”><span>Activate</span></button>

<button class=”button button–bestia”>
<div class=”button__bg”></div><span>Locate</span>
</button>

<button class=”button button–surtur”>
<svg class=”textcircle” viewBox=”0 0 500 500″>
<title>Projects & client work 2020</title>
<defs><path id=”textcircle” d=”M250,400 a150,150 0 0,1 0,-300a150,150 0 0,1 0,300Z”
/></defs>
<text><textPath xlink:href=”#textcircle” aria-label=”Projects & client work 2020″ textLength=”900″>Projects &amp; client work 2020</textPath></text>
</svg>
<svg aria-hidden=”true” class=”eye” width=”70″ height=”70″ viewBox=”0 0 70 70″ xmlns=”http://www.w3.org/2000/svg”>
<path class=”eye__outer” d=”M10.5 35.308c5.227-7.98 14.248-13.252 24.5-13.252s19.273 5.271 24.5 13.252c-5.227 7.98-14.248 13.253-24.5 13.253s-19.273-5.272-24.5-13.253z”/>
<path class=”eye__lashes-up” d=”M35 8.802v8.836M49.537 11.383l-3.31 8.192M20.522 11.684l3.31 8.192″ />
<path class=”eye__lashes-down” d=”M35 61.818v-8.836 8.836zM49.537 59.237l-3.31-8.193 3.31 8.193zM20.522 58.936l3.31-8.193-3.31 8.193z” />
<circle class=”eye__iris” cx=”35″ cy=”35.31″ r=”5.221″ />
<circle class=”eye__inner” cx=”35″ cy=”35.31″ r=”10.041″ />
</svg>
</button>

<button class=”button button–fenrir”>
<svg aria-hidden=”true” class=”progress” width=”70″ height=”70″ viewbox=”0 0 70 70″>
<path class=”progress__circle” d=”m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z” />
<path class=”progress__path” d=”m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z” pathLength=”1″ />
</svg>
<span>Go</span>
</button>

 

Examples of custom divi website buttons

Whilst your here can I ask a quick favour?

If you found this this post helped in any way, feel free to tap the like button on my accompanying youtube video. it’ll cost you nothing and really helps me get these tutorials out to more people like you.

I hope that this tutorial helps you create something awesome, subscribe or sign up to my newsletter to stay informed and have a great day!

Jim Monkhouse
Jim is a web designer & developer with over seven years experience building websites for small business using the wordpress theme

Did you find this post valuable? If so, please consider sharing to help me, help more people

More Posts

How to add custom Icons to Divi’s social media module

How to add custom Icons to Divi’s social media module

We all know the divi social media module is an amazing tool to help you effortlessly display your social media networks, but with that convenience comes a lack of ability to customise the social media icons. If you’ve wondered how to solve this problem and customise social media icons or add new social media networks in the easiest way possible, you’re in the right place. Let’s learn how to How to add custom Icons to Divi’s social media module

0 Comments

Submit a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.