6 Creative Buttons You Can Add to Your Divi Site Right Now

by Jan 2, 2021Divi Freebies, Tutorials

Buttons are very important for any website. They give users a way to interact and navigate on your site. It’s crucial to use buttons that are clear and uniform. In this tutorial, we will show you how to use the Divi Text module to add some nice and animated buttons to your Divi site.

Divi is a great website builder which comes with dozens of powerful modules. One of them is the Button module which allows users to easily add buttons to their sites. We can change button font, colors, add an icon, but what if we want something more? Divi Button module doesn’t offer any custom animation. In this tutorial, we will show you how to add a custom button to your Divi site with a bit of CSS. We will use the Text module for a button markup and add custom styles and animation with CSS.

You can follow this tutorial or simply Download FREE Button Pack and import it to your Divi Library to use on your page straight away!

Let’s get to work!

1

Button with animated background

For this button style, we have used black background color, and light blue color for hover. We can see a colored corner of the button, and it expands with a nice animation on hover. In the below steps, you will see how this kind of button can be added to your Divi website with 2 simple steps which will be the same for each button listed on this page.

1. Add Text Module with HTML button markup

First thing we need to do is to add a Text module with code that will display our button. It’s important to do this in “Text” mode, so the code is served properly. Add Text module and add the following code into it:

h

HTML


<button class="btn1">Hover me!</button>

2. Add Custom CSS

To style our button we will use custom CSS.This code can be added to Divi → Theme Options → Custom CSS or to your Divi child theme stylesheet.

We recommend using child theme. If you do not have one yet, please check our tutorial on How to Create a WordPress Child Theme for Divi or use our FREE Child Theme Generator.

h

CSS


.btn1 {
  z-index:1;
  border: none;
  display: block;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;
  overflow: hidden;
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  background-color: #222;
  padding: 17px 60px;
  margin: 0 auto;
  box-shadow: 0 5px 15px rgba(0,0,0,0.20);
}

.btn1 span {
  position: relative; 
  z-index: 1;
}

.btn1:before,
.btn1:after {
  content: "";
  z-index:-1;
  position: absolute;
  left: 0;
  top: 0;
  height: 490%;
  width: 140%;
  background: #78c7d2;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
}

.btn1:hover:before {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

.btn1:hover:after {
  background: #44b5c4;
  -webkit-transform: translateX(-65%) translateY(-25%) rotate(45deg);
  transform: translateX(-65%) translateY(-25%) rotate(45deg);
}

2

3D Cube style button

This button style has a nice 3D cube animation so we can see a flipped part of the button with different text on hover. To achieve this effect we need to add span classes that will allow us to control front and back text.

1. Add Text Module with HTML button markup

Add Text module with the following HTML. You can edit the code to add your own link and texts for front button and flipped button on hover.

h

HTML


<a href="#" class="btn2">
  <span class="text">Text</span>
  <span class="flip-front">Front</span>
  <span class="flip-back">Back</span>
</a>

2. Add Custom CSS

h

CSS


.btn2 a {
  text-decoration: none;
  display: inline-block;
}

.btn2 {
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.text {
  padding: 0 50px;
  visibility: hidden;
}

.flip-front, 
.flip-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-style: flat;
    transform-style: flat;
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
}

.flip-front {
    color: #313131;
    border: 2px solid #313131;
    background-color: transparent;
    -webkit-transform: rotateX(0deg) translateZ(25px);
    -ms-transform: rotateX(0deg) translateZ(25px);
    -o-transform: rotateX(0deg) translateZ(25px);
    transform: rotateX(0deg) translateZ(25px);
}

.flip-back {
  color: #fff;
  background-color: #313131;
  border: 2px solid #313131;
  -webkit-transform: rotateX(90deg) translateZ(25px);
  -ms-transform: rotateX(90deg) translateZ(25px);
  -o-transform: rotateX(90deg) translateZ(25px);
  transform: rotateX(90deg) translateZ(25px);
}

.btn2:hover .flip-front {
    -webkit-transform: rotateX(-90deg) translateZ(25px);
    -ms-transform: rotateX(-90deg) translateZ(25px);
    -o-transform: rotateX(-90deg) translateZ(25px);
    transform: rotateX(-90deg) translateZ(25px);
}

.btn2:hover .flip-back {
    -webkit-transform: rotateX(0deg) translateZ(25px);
    -ms-transform: rotateX(0deg) translateZ(25px);
    -o-transform: rotateX(0deg) translateZ(25px);
    transform: rotateX(0deg) translateZ(25px);
}
3

Button with animated icon

This button style features an icon that transforms into button background on hover. To achieve that we have 2 classes added to the module. One with general button styling and another for editing background color and animation.

1. Add Text Module with HTML button markup

Add Text module with the following HTML. This button uses .btn3 and .bg custom classes. You can edit the code to add your own link (replace “#” with your link) and edit button text.

h

HTML


  <a class="btn3" href="#">
    Let's Go!
    <span class="bg"></span>
  </a>

2. Add Custom CSS

h

CSS


a.btn3 {
  text-decoration: none;
  display: inline-block;
}
    
.btn3 {
  color: #222;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 24px;
  position: relative;
  padding: 10px 50px 10px 20px;

  -webkit-transition: all 0.3s;

  -o-transition: all 0.3s;

  transition: all 0.3s;
}

.btn3 .bg {
  background: #222;
  width: 30px;
  height: 2px;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -1px;
  z-index: -1;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.btn3:hover {
  padding-right: 20px;
  color: #fff;
}

.btn3:hover .bg {
  height: 100%;
  width: 100%;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.btn3 .bg:before, .btn3 .bg:after {
  content: '';
  height: 2px;
  width: 10px;
  background: #222;
  position: absolute;
  right: -2px;      
  -webkit-transition: all 0.3s;      
  -o-transition: all 0.3s;      
  transition: all 0.3s;
}

.btn3 .bg:before {
  bottom: 3px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.btn3 .bg:after{
  top: 3px;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.btn3:hover .bg:before,
.btn3:hover .bg:after{
  right: 0;
}

.btn3:hover .bg:before{
  bottom: 6px;
}

.btn3:hover .bg:after{
  top: 6px;
}

4

Fluid Button

Here is another button with an animated icon. The arrow is placed on left by default and it animates nicely on the right when you mouseover.

1. Add Text Module with HTML button markup

Add Text module with the following HTML. For this button style, we need to add a custom class to the Text module settings. Go to Advanced → CSS & ID Classes tab and add btn4 to CSS Class field.

h

HTML


<a href="#"><span>Button</span>
<div class="liquid"></div>
</a>

2. Add Custom CSS

h

CSS


.btn4 a {
  position: relative;
  padding: 15px 50px;
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  width: 200px;
  overflow: hidden;
  border-radius: 40px;
  margin:auto;
}

.btn4 a span {
  position: relative;
  color: #fff;
  font-size: 20px;
  letter-spacing: 2px;
  z-index: 1;
}

.btn4 a .liquid {
  position: absolute;
  top: -80px;
  left: 0;
  width: 200px;
  height: 200px;
  background: #4973ff;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .5);
  transition: .5s;
}

.btn4 a .liquid::after,
.btn4 a .liquid::before {
  content: '';
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -75%);
  background: #000;
}

.btn4 a .liquid::before {
  
  border-radius: 45%;
  background: rgba(20, 20, 20, 1);
  animation: animate 5s linear infinite;
}

.btn4 a .liquid::after {
  
  border-radius: 40%;
  background: rgba(20, 20, 20, .5);
  animation: animate 10s linear infinite;
}

.btn4 a:hover .liquid{
  top: -120px;
}

@keyframes animate {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}
5

Button with animated background

Here is another button with an animated icon. The arrow is placed on left by default and it animates nicely on the right when you mouseover.

1. Add Text Module with HTML button markup

Add Text module with the following HTML. For this button style, we also need to add a custom class to the Text module settings. Go to Advanced → CSS & ID Classes tab and add btn5 to CSS Class field.

h

HTML


<button>
  <div></div>
</button>

2. Add Custom CSS

h

CSS


.btn5 button {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    display: block;
    width: 240px;
    padding: 40px;
    margin: 0 auto;
    border: 0;
    cursor: pointer;
    border-radius: 2px;
    transform: translateY(-50%);
    box-shadow: 0 10px 20px -5px #94a6af;
    overflow: hidden;
}

.btn5 button:before, .btn5 button:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.btn5 button:before {
    transform: scale(1);
    background-image: url('https://himalayasingh.github.io/button-hover-effect-1/img/bg.jpg');
    background-size: cover;
    transition: 0.3s ease transform;
    z-index: 1;
}

.btn5 button:after {
    background-color: #000;
    opacity: 0.16;
    z-index: 2;
}

.btn5 button div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
}

.btn5 button div:before, .btn5 button div:after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    color: #fff;
    font-size: 30px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 25px 0;
    transition: 0.3s ease all;
}

.btn5 button div:before {
    content: "HOVER";
    letter-spacing: 0;
    opacity: 1;
    transform: scale(1);
}

.btn5 button div:after {
    content: "YEAH !";
    letter-spacing: -10px;
    transform: scale(0);
    opacity: 0;
}

.btn5 button:hover:before {
    transform: scale(1.3);
}

.btn5 button:hover div:before {
    letter-spacing: 3px;
    opacity: 0;
    transform: scale(4);
}

.btn5 button:hover div:after {
    letter-spacing: 0;
    opacity: 1;
    transform: scale(1);
}

.btn5 button p {
    padding-bottom:0;
}

6

Button with animated background

Here is another button with an animated icon. The arrow is placed on left by default and it animates nicely on the right when you mouseover.

1. Add Text Module with HTML button markup

Add Text module with the following HTML. For this button style, we also need to add a custom class to the Text module settings. Go to Advanced → CSS & ID Classes tab and add btn5 to CSS Class field.

h

HTML


<div class="buttons">
<div class="btn_container">
      <a href="#" class="btn6 effect" data-sm-link-text="CLICK" target="_blank" rel="noopener noreferrer"><span>HOVER</span></a>
 </div>
</div>

2. Add Custom CSS

h

CSS


.buttons {
  display: flex;
  flex-direction: row;
      flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.btn_container {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 240px;
}

.btn6 {
  letter-spacing: 0.1em;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 45px;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
}

.btn6:hover {
  text-decoration: none;
}

/* button background*/
.effect {
  --uismLinkDisplay: var(--smLinkDisplay, inline-flex);
  display: var(--uismLinkDisplay);
  color: #000;
  outline: solid  2px #000;
  position: relative;
  transition-duration: 0.4s;
  overflow: hidden;
}

.effect::before,
.effect span{
    margin: 0 auto;
	transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	transition-duration: 0.4s;
}

.effect:hover{
  background-color: #000;
}

/* HOVER */
.effect:hover span{
  -webkit-transform: translateY(-400%) scale(-0.1,20);
          transform: translateY(-400%) scale(-0.1,20);
}

.effect::before{
  content: attr(data-sm-link-text);
	color: #FFF;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transform: translateY(500%) scale(-0.1,20);
          transform: translateY(500%) scale(-0.1,20);
}

/* HOVER */
.effect:hover::before{
  letter-spacing: 0.05em;
  -webkit-transform: translateY(0) scale(1,1);
          transform: translateY(0) scale(1,1);
}

This is it! I hope you enjoy reading this tutorial and it will help you spice up buttons on your Divi website. If you want more tutorial, make sure to sign up to our newsletter at the bottom of this site.

Maciej Ekstedt

Maciej Ekstedt

Maciej is the co-founder of Divi Pixel. He is a self-made web designer and marketing expert, and he loves his job so much that he barely leaves the office. He transforms creative ideas into effective strategies for his company. Maciej is fascinated by the phenomenon of a megalopolis. He notices patterns and details which make up the whole thing, and he uses these skills in his work.