CSS Code Snippets for Divi Buttons

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

AmBec on 2024-05-15 at 17:38

How can I apply these effects to the Submit button of a Divi form?
Reply
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
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
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 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
Peter Sintic on 2023-08-23 at 16:06

What about a delay between the animation loop? Is that possible?
Reply
- 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
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 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
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 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
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 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
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 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
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
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
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
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
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 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 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?