CSS Code Snippets for Divi Buttons

h
Divi Freebies, Divi Tutorials
v
comments (22)

Want to put a fun spin on your Divi buttons?

The Divi Button Module has a plethora of customization options. You can change the color, icon, hover style, animation, position… But what if you want to go above and beyond what Divi offers?

This is where this Divi Button tutorial comes in. You can choose from 25 button hover effects, all available with easy copy and paste snippets! All you need to do to use these effects is copy and paste the code – and follow my instructions to easily turn any of these button styles into a preset.

Having trouble choosing just one effect? Grab the free layout so you can have all of these styles available right inside your Divi Library. And if you’re a CSS beginner who would like to understand the code and tweak it, feel free to check out our Ultimate Guide for Working with CSS in Divi.

All right, let’s get started!

Download Free Layout Demo Page

Free Resources for Divi Lovers

Join our newsletter to get the good stuff!

We’ll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.

Sign up to download

Get access to this layout and all the free resources made exclusively for our subscribers!

Already subscribed?

Fill the signup form and if you’re on the list it’ll get you straight to the download page! 


Can’t see the form? Click here
CSS for Divi Buttons #1

Fun with Icons

Use the CSS class dl-icon-right and make sure to adjust the button padding on hover to leave space for the Icon.

/* CSS for buttons - Icon Right */
.dl-icon-right {
  --btn-background: #3fdfba; /* set background color */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-right::after {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  right: -40px;
  width: 40px;
  background: var(--btn-background);
  margin: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-right:hover::after {
  right: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-right {
  overflow: hidden;
}

Use the CSS class dl-icon-left and make sure to adjust the button padding on hover to leave space for the Icon.

/* CSS for buttons - Icon Left */
.dl-icon-left {
  --btn-background: #3fdfba; /* set background color */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-left::before {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  left: -40px;
  width: 40px;
  background: var(--btn-background);
  margin: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-left:hover::before {
  left: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-left {
  overflow: hidden;
}

Use the CSS class dl-icon-fade. Adjust the icon font-size if needed.

/* CSS for buttons - Icon Animation - Fade In */
.dl-icon-fade {
  --btn-background: #3fdfba; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-icon-fade::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  background: var(--btn-background);
  margin: 0;
  font-size: 2em !important;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-fade:hover::after {
  opacity: 1;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-fade {
  overflow: hidden;
}

Use the CSS class dl-icon-top. Adjust the icon font-size if needed.

/* CSS for buttons - Icon Top */
.dl-icon-top {
  --btn-background: #3fdfba; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-icon-top::after {
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  background: var(--btn-background);
  margin: 0;
  height: 100%;
  font-size: 2em !important;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-top:hover::after {
  top: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-top {
  overflow: hidden;
}

Use the CSS class dl-icon-bottom. Adjust the icon font-size if needed.

/* CSS for buttons - Icon Bottom */
.dl-icon-bottom {
  --btn-background: #3fdfba; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-icon-bottom::after {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  background: var(--btn-background);
  margin: 0;
  height: 100%;
  font-size: 2em !important;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-bottom:hover::after {
  bottom: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-bottom {
  overflow: hidden;
}
CSS for Divi Buttons #2

Text on Hover

Use the CSS class dl-hover-text-fade. Adjust the right and left padding to make space for longer text if needed. Background color on hover set in the module settings. Add content:'My text'; to the “After” element inside the Button module settings (Advanced tab -> Custom CSS).

/* CSS for buttons - Text on hover - Fade In */
#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-fade::after {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: inherit;
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: opacity .3s linear;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-fade:hover::after {
  opacity: 1;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-fade {
  overflow: hidden;
}

Use the CSS class dl-hover-text-left. Adjust the right and left padding to make space for longer text if needed. Add content:'My text'; to the “After” element inside the Button module settings (Advanced tab -> Custom CSS).

/* CSS for buttons - Text on hover - Slide from the Left */
.dl-hover-text-left {
  --btn-background: #3fdfba; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-left::after {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0;
  top: 0;
  bottom: 0;
  opacity: 1;
  left: -100%;
  width: 100%;
  background: var(--btn-background);
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: all .3s linear;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-left:hover::after {
  left: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-left {
  overflow: hidden;
}

Use the CSS class dl-hover-text-right. Adjust the right and left padding to make space for longer text if needed. Add content:'My text'; to the “After” element inside the Button module settings (Advanced tab -> Custom CSS).

/* CSS for buttons - Text on hover - Slide from the Right */
.dl-hover-text-right {
  --btn-background: #3fdfba; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-right::after {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0;
  top: 0;
  bottom: 0;
  opacity: 1;
  right: -100%;
  width: 100%;
  background: var(--btn-background);
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: all .3s linear;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-right:hover::after {
  right: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-right {
  overflow: hidden;
}

Use the CSS class dl-hover-text-top. Adjust the right and left padding to make space for longer text if needed. Add content:'My text'; to the “After” element inside the Button module settings (Advanced tab -> Custom CSS).

/* CSS for buttons - Text on hover - Slide from the Top */
.dl-hover-text-top {
  --btn-background: #3fdfba; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-top::after {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0;
  top: -100%;
  opacity: 1;
  left: 0;
  height: 100%;
  right: 0;
  background: var(--btn-background);
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: all .3s linear;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-top:hover::after {
  top: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-top {
  overflow: hidden;
}

Use the CSS class dl-hover-text-bottom. Adjust the right and left padding to make space for longer text if needed. Add content:'My text'; to the “After” element inside the Button module settings (Advanced tab -> Custom CSS).

/* CSS for buttons - Text on hover - Slide from the Bottom */
.dl-hover-text-bottom {
  --btn-background: #3fdfba; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-bottom::after {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0;
  bottom: -100%;
  opacity: 1;
  left: 0;
  height: 100%;
  right: 0;
  background: var(--btn-background);
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: all .3s linear;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-bottom:hover::after {
  bottom: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-bottom {
  overflow: hidden;
}
CSS for Divi Buttons #3

Double Borders

Use the CSS class dl-double-border-top-right. Make sure to set the same border width in CSS code, as the border width set in the Button module settings.

/* CSS for buttons - Double border on hover - Top & Right */
.dl-double-border-top-right {
  --border-width: 2px; /* set the Button border width */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-top-right::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: '';
  z-index: -1;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-top-right:hover::after {
  top: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  right: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  bottom: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  left: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
}

Use the CSS class dl-double-border-top-left. Make sure to set the same border width in CSS code, as the border width set in the Button module settings.

/* CSS for buttons - Double border on hover - Top & Left */
.dl-double-border-top-left {
  --border-width: 2px; /* set the Button border width */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-top-left::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: '';
  z-index: -1;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-top-left:hover::after {
  top: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  right: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  bottom: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  left: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
}

Use the CSS class dl-double-border-bottom-right. Make sure to set the same border width in CSS code, as the border width set in the Button module settings.

/* CSS for buttons - Double border on hover - Bottom & Right */
.dl-double-border-bottom-right {
  --border-width: 2px; /* set the Button border width */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-bottom-right::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: '';
  z-index: -1;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-bottom-right:hover::after {
  top: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  right: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  bottom: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  left: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
}

Use the CSS class dl-double-border-bottom-left. Make sure to set the same border width in CSS code, as the border width set in the Button module settings.

/* CSS for buttons - Double border on hover - Bottom & Left */
.dl-double-border-bottom-left {
  --border-width: 2px; /* set the Button border width */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-bottom-left::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: '';
  z-index: -1;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-bottom-left:hover::after {
  top: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  right: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  bottom: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  left: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
}

Use the CSS class dl-double-border-center. Make sure to set the same border width in CSS code, as the border width set in the Button module settings.

/* CSS for buttons - Double border on hover - Center */
.dl-double-border-center {
  --border-width: 2px; /* set the Button border width */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-center::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: '';
  z-index: -1;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-center:hover::after {
  top: calc(var(--border-width) * (-3.5));
  right: calc(var(--border-width) * (-3.5));
  bottom: calc(var(--border-width) * (-3.5));
  left: calc(var(--border-width) * (-3.5));
}

Use the CSS class dl-double-border-fade-out. Make sure to set the same border width in CSS code, as the border width set in the Button module settings.

/* CSS for buttons - Double border on hover - Fade Out */
.dl-double-border-fade-out {
  --border-width: 2px; /* set the Button border width */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-fade-out::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: '';
  z-index: -1;
  transition: all .5s ease-out;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-fade-out:hover::after {
  top: calc(var(--border-width) * (-6));
  right: calc(var(--border-width) * (-6));
  bottom: calc(var(--border-width) * (-6));
  left: calc(var(--border-width) * (-6));
  opacity: 0;
}
CSS for Divi Buttons #4

Animated Lines

Use the CSS class dl-lines-horizontal.

/* CSS for buttons - Animated Lines on hover - Horizontal */
.dl-lines-horizontal {
  --border-width: 2px; /* set line width */
  --border-color: #000 /* set line color */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-horizontal::before,
#page-container .et-l .et_pb_section .et_pb_button.dl-lines-horizontal::after {
  display: block !important;
  margin: 0;
  content: '';
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: inherit;
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-style: solid;
  border-left: none;
  border-right: none;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-horizontal::before {
  top: calc(var(--border-width) * (-1));
  left: 0;
  bottom: auto;
  right: auto;
  border-bottom: none;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-horizontal::after {
  top: auto;
  left: auto;
  bottom: calc(var(--border-width) * (-1));
  right: 0;
  border-top: none;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-horizontal:hover::before,
#page-container .et-l .et_pb_section .et_pb_button.dl-lines-horizontal:hover::after {
  width: 100%;
  opacity: 1;
}

Use the CSS class dl-lines-left.

/* CSS for buttons - Animated Lines on hover - from the Left */
.dl-lines-left {
  --border-width: 2px; /* set line width */
  --border-color: #000 /* set line color */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-left::before {
  display: block !important;
  margin: 0;
  content: '';
  width: 0;
  height: 100%;
  opacity: 0;
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-style: solid;
  border-left: none;
  border-right: none;
  left: 0;
  right: auto;
  top: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-left:hover::before {
  width: 100%;
  opacity: 1;
}

Use the CSS class dl-lines-right.

/* CSS for buttons - Animated Lines on hover - from the Right */
.dl-lines-right {
  --border-width: 2px; /* set line width */
  --border-color: #000 /* set line color */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-right::before {
  display: block !important;
  margin: 0;
  content: '';
  width: 0;
  height: 100%;
  opacity: 0;
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-style: solid;
  border-left: none;
  border-right: none;
  right: 0;
  left: auto;
  top: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-right:hover::before {
  width: 100%;
  opacity: 1;
}

Use the CSS class dl-lines-center.

/* CSS for buttons - Animated Lines on hover - from the Center */
.dl-lines-center {
  --border-width: 2px; /* set line width */
  --border-color: #000 /* set line color */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-center::before {
  display: block !important;
  margin: 0;
  content: '';
  width: 0;
  height: 100%;
  opacity: 0;
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-style: solid;
  border-left: none;
  border-right: none;
  right: 50%;
  left: auto;
  top: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-center:hover::before {
  width: 100%;
  opacity: 1;
  right: 0;
}

Use the CSS class dl-lines-corners.

/* CSS for buttons - Animated Lines on hover - Corners */
.dl-lines-corners {
  --border-width: 2px; /* set line width */
  --border-color: #000 /* set line color */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-corners::before,
#page-container .et-l .et_pb_section .et_pb_button.dl-lines-corners::after {
  display: block !important;
  margin: 0;
  content: '';
  border-radius: inherit;
  border-width: var(--border-width);
  border-color: transparent;
  border-style: solid;
  opacity: 1;
  width: 0;
  height: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-corners::before {
  top: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  bottom: auto;
  right: auto;
  border-right: none;
  border-bottom: none;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-corners::after {
  top: auto;
  left: auto;
  bottom: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  border-left: none;
  border-top: none;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-corners:hover::before,
#page-container .et-l .et_pb_section .et_pb_button.dl-lines-corners:hover::after {
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  border-color: var(--border-color);
}
CSS for Divi Buttons #5

Attention Grabber

Use the CSS class dl-pulse. The CSS code can work with any Divi element, not just a Button module.

/* CSS for buttons - Attention Grabber - Pulse */
#page-container .et-l .et_pb_section .dl-pulse {
  animation: button-pulse 1.5s infinite;
}

@keyframes button-pulse {

  0%,
  30%,
  60%,
  100% {
    transform: scale(1);
  }

  15%,
  45% {
    transform: scale(1.15);
  }
}

#page-container .et-l .et_pb_section .dl-pulse:hover {
  animation: none;
}

Use the CSS class dl-shadow-pulse. The CSS code can work with any Divi element, not just a Button module.

/* CSS for buttons - Attention Grabber - Shadow Pulse */
#page-container .et-l .et_pb_section .dl-shadow-pulse {
  animation: shadow-pulse 1s infinite;
}

@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 #3fdfba; /* Set shadow color */
  }

  50% {
    box-shadow: 0 0 0 1em transparent;
  }

  100% {
    box-shadow: 0 0 transparent;
  }
}

#page-container .et-l .et_pb_section .dl-shadow-pulse:hover {
  animation: none;
}

Use the CSS class dl-shake. The CSS code can work with any Divi element, not just a Button module.

/* CSS for buttons - Attention Grabber - Shake */
#page-container .et-l .et_pb_section .dl-shake {
  animation: button-shake 1.5s infinite;
}

@keyframes button-shake {

  10%,90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,50%,70% {
    transform: translate3d(-3px, 0, 0);
  }

  40%,60% {
    transform: translate3d(3px, 0, 0);
  }
}

#page-container .et-l .et_pb_section .dl-shake:hover {
  animation: none;
}

Use the CSS class dl-border-pulse. The CSS code can work with any Divi element, not just a Button module.

/* CSS for buttons - Attention Grabber - Border Pulse */
.dl-border-pulse {
  --border-width: 2px; /* set the border width */
  --border-color: #3fdfba; /* set the border color */
}

#page-container .et-l .et_pb_section .dl-border-pulse::after {
  display: block !important;
  margin: 0;
  border: var(--border-width) solid var(--border-color);
  border-radius: inherit;
  content: '';
  z-index: -1;
  transition: all .5s ease-out;
  animation: border-pulse 1.2s infinite;
  opacity: 1;
}

@keyframes border-pulse {

  0%,100% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  50% {
    top: calc(var(--border-width) * (-1) - var(--border-width) * 3);
    right: calc(var(--border-width) * (-1) - var(--border-width) * 3);
    bottom: calc(var(--border-width) * (-1) - var(--border-width) * 3);
    left: calc(var(--border-width) * (-1) - var(--border-width) * 3);
  }
}

#page-container .et-l .et_pb_section .dl-border-pulse:hover::after {
  opacity: 0;
}

Which one is your favorite?

I hope you found this tutorial helpful and easy to use. Let me know which style is your favorite! If you have any questions, you can ask them in the comments below – or in my Divi Lovers Facebook group. It’s a fantastic community of Divi users and web designers where we share useful tips and tricks.

Have you seen our

Divi child themes?

Divi Toolbox plugin?

We offer a great selection of high-quality Divi products to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!
Divi Lover Shop

22 Comments

  1. AmBec
    AmBec on 2024-05-15 at 17:38

    How can I apply these effects to the Submit button of a Divi form?

    Reply
  2. Chantelle Leigh Kern
    Chantelle Leigh Kern on 2024-04-13 at 15:07

    how do you get a specific button to perform a certain function on click

    Reply
  3. John
    John on 2023-12-07 at 22:31

    Hi Ania… thank you for replying. But I’m not sure I understand the pseudo-element. I’m trying to find more online now. Where can I find an example of the CSS I would need to do this.

    Reply
  4. John
    John on 2023-12-06 at 21:05

    Is there any way to add custom icons to the Divi Button module, using images, SVGs, etc, without using additional plugins?

    Reply
    • Ania RomaÅ„ska
      Ania Romańska on 2023-12-07 at 09:32

      Hi John! Yes, if you enable the standard icon in the module settings, it will use the ::before or ::after pseudo-element. You can modify this with CSS and add a custom background image and hide the default icon symbol.

      Reply
  5. Peter Sintic
    Peter Sintic on 2023-08-23 at 16:06

    What about a delay between the animation loop? Is that possible?

    Reply
    • Peter Sintic
      Peter Sintic on 2023-08-24 at 15:35

      If anyone is interested. i changed the code a bit to have the animation pause after its done before starting up again. I increased the amount of movement to suit my needs as well.

      /* CSS for buttons – Attention Grabber – Shake */
      #page-container .et-l .et_pb_section .dl-shake {
      animation: button-shake 1.5s infinite;
      }

      @keyframes button-shake {

      0% { transform:translate(0,0) }
      10% { transform:translate(8px,0) }
      20% { transform:translate(0,0) }
      30% { transform:translate(8px,0) }
      45% { transform:translate(0,0) }
      100% { transform:translate(0,0) }

      }
      #page-container .et-l .et_pb_section .dl-shake:hover {
      animation: none;
      }

      Reply
  6. Tracy E. Garrick
    Tracy E. Garrick on 2023-08-01 at 01:53

    Is it possible to change the color of one word on a button in Divi in a sentence?

    Reply
    • Ania RomaÅ„ska
      Ania Romańska on 2023-08-01 at 15:51

      Hi Tracy!
      No, sorry, I’m afraid it won’t be possible because you cannot include any additional HTML content inside the button value. There are a few ways to approach this. You can “fake” the button look by using a standard Text module or use a Code module with your custom HTML and CSS, or style a standard link inside a Text module with custom CSS.

      Reply
  7. Marc McIntosh
    Marc McIntosh on 2023-05-08 at 18:15

    Thank you so much for sharing these designs. When I load the CSS in Divi, I get the dreaded red X in the line that includes –btn-background: #______. Taking out one of the two leading dashes gets rid of the red X, but then the icon shading goes away. Keeping the CSS as-is requires me to check the box that the CSS might break the site, but it does not seem to have a negative impact. Do you have any suggestions that would get rid of the error while keeping the functionality of the button?

    Reply
    • Ania RomaÅ„ska
      Ania Romańska on 2023-05-22 at 12:04

      Hello Marc,
      The code we shared uses CSS variables, and this is relatively new CSS feature. The error-checker in WP editor doesn’t recognize it correctly. The code is correct, and these are false-positive warnings.

      Now, you can edit the code and remove variables if you wish. To do that, you would need to replace each occurence of the variable thourought the code. Every var(--border-color) would need to be replaced with your HEX code and every var(--border-width) with 2px, for example. You would also need to remove the first ruleset that sets the variables (with double leading dashes).

      Hopefully, this helps.

      Reply
  8. Amy McMahon
    Amy McMahon on 2023-01-20 at 12:46

    Hi There. Thanks for this great tutorial. I managed to use the Double Border effect on my Button Module. Is it possible to use the same effect on the Back to Top button and a Submit button in a contact form? I tried editing the code to make this work, but nothing has worked for me so far. Any help would be greatly appreciated. Thank you 🙂

    Reply
    • Ania RomaÅ„ska
      Ania Romańska on 2023-01-24 at 11:54

      The CSS selectors would need to be edited for the submit button (as it’s not just a simple link) and it might be a bit more complicated with the back to top button. I’m sorry, I won’t be able to provide the exact code, but if you’d like to learn CSS targetting with me, make sure to sign up for our next CSS & Divi Challenge 😉

      Reply
  9. tomas
    tomas on 2023-01-07 at 08:59

    Hey guys nice designs, im kinda new in using divi can someone explain me how I get the design for my buttons?, I tried inspecting the element and replacing .et_pb_section with my button information

    Reply
    • Ania RomaÅ„ska
      Ania Romańska on 2023-01-10 at 15:31

      Please watch the video overview. I’m showing how to apply this CSS step-by-step in any Divi website.

      Reply
  10. tyler garrett
    tyler garrett on 2022-11-16 at 00:18

    Hello, I found the mobile version for dl-icon-top to not flow as nice as the desktop. What would you recommend for mobile? Thanks!

    Reply
  11. Adetutu
    Adetutu on 2022-08-18 at 18:47

    Hello Ania! i am a follower of your tutorials and I love these button styles, they have been a great help! i have a huge question: please do you have time to make a tutorial on the button style and even the progressive line used on the column used on this website

    urbanair.com/about-urban-air/

    thank you

    Reply
  12. Name *Eduardo
    Name *Eduardo on 2022-08-15 at 14:23

    Fantastic article and fantastic resource. Thank you so much Ania for providing such great content. It makes life easy for the rest of us…. 😉

    Reply
  13. Miroslav Bartík
    Miroslav Bartík on 2022-07-29 at 16:07

    Hi Ania, great post. Your work and efforts will help many people to liven up their websites a bit. Thanks for sharing your knowledge

    Reply
  14. Matthew
    Matthew on 2022-07-28 at 16:18

    Awesome work, as always, Ania! Love the Shadow Pulse one, but think it might look better fading in and out just a bit slower.

    Reply
    • Ania RomaÅ„ska
      Ania Romańska on 2022-07-29 at 11:33

      I’m glad you like it, Matthew! You can slow it down easily just by changing the animation-duration from 1s to a different value here animation: shadow-pulse 2s infinite;

      Reply
      • Peter Sintic
        Peter Sintic on 2023-08-23 at 17:48

        Is it possible to add a delay to the animation so there is a pause before it starts over again on its loop?

Submit a Comment

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

Enjoing our content?

You might find this interesting…

Check out Recommended 
Divi & Web Resources

See the list

Learn Divi Theme with our Practical Guides

See courses

Meet Divi Lovers and Join Our Community

Learn more

Jump Start Your Project with a Premium Child Theme

Browse Themes

More from the Blog

More tips & tricks for Divi Lovers

License Details

REGULAR LICENSE

Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

EXTENDED LICENSE

Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

SUPPORT & UPDATES

Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements

SERVER SETTINGS:

  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)

PHP.INI SETTINGS:

  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module

PHP MODULES:

  • allow_url_fopen

Would you like to...

Consult Ania and fellow students?

Join the conversation inside our private FB group.
Join the group

Would you like to...

Get support privately?

Submit a support ticket via your account page.

Submit a ticket

Ask Ania?

Submit a question for the next live Q&A session.
Submit a Question

Consult fellow students?

Join the conversation inside our private FB group.
Join the group