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!


Text
Front
Back

Let’s Go!

Button

HOVER
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.


Text
Front
Back

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.


Let’s Go!

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.

Button

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.

HOVER

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, co-founder of Divi Pixel, is a passionate web designer and marketing expert who thrives on turning creative ideas into effective strategies. His fascination with the intricacies of megalopolises influences his work, where he meticulously crafts detailed solutions for his company.

Enhance your Divi Theme with Custom Settings and New Modules. Start Creating Awesome Websites with the Divi Pixel

See Pricing

We offer a 14 Day Money Back Guarantee, so joining is Risk-Free!

Related Articles

Download A FREE Footer Layout Pack for Divi

Download A FREE Footer Layout Pack for Divi

Download A FREE Mega Menu UI Kit for Divi

Download A FREE Mega Menu UI Kit for Divi

Download A FREE Coming Soon Layout Pack for Divi

Download A FREE Coming Soon Layout Pack for Divi

Download A FREE Mega Menu UI Kit for Divi

Download A FREE Mega Menu UI Kit for Divi

How to create Mega Menu in Divi with Balloon Module

How to create Mega Menu in Divi with Balloon Module

Download A FREE Pricing Tables UI Kit for Divi

Download A FREE Pricing Tables UI Kit for Divi

9 Comments

  1. Gilbert
    Gilbert on 21. December 2020 at 20:16

    Nice ones. Thanks for sharing.

    Reply
    • Maciej Ekstedt
      Maciej Ekstedt on 21. December 2020 at 20:37

      You’re welcome, Gilbert! I’m glad to hear that you like it 🙂

      Reply
  2. enze
    enze on 21. December 2020 at 20:52

    Thanks Maciej! Great article 👍👌💪😃

    Reply
    • Maciej Ekstedt
      Maciej Ekstedt on 21. December 2020 at 22:15

      Nie ma za co Piotr 🙂 Mam nadzieję, że się przyda.

      Reply
  3. Manny
    Manny on 21. December 2020 at 22:04

    Thank you, nice collection and useful 🙂

    Reply
    • Maciej Ekstedt
      Maciej Ekstedt on 21. December 2020 at 22:15

      Glad to hear that 🙂

      Reply
  4. Dean
    Dean on 22. December 2020 at 22:28

    Thank you for sharing. Some really nice ones…and at least one I can use on my site…
    thx

    Reply
  5. Mike
    Mike on 19. January 2021 at 14:55

    Hi Maciej, is there a way to add the class to the contact form submit button? Preferably Button 6?

    Reply
  6. george
    george on 15. September 2022 at 19:59

    I am getting an “Expected RBrace” in the CSS. To be sure. The CSS provided needs to be in the Text CSS “Before” field?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *