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!

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.

Shares

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!

20 Comments

  1. John

    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
  2. John

    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

      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
  3. Peter Sintic

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

    Reply
    • Peter Sintic

      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
  4. Tracy E. Garrick

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

    Reply
    • Ania RomaÅ„ska

      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
  5. Marc McIntosh

    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

      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
  6. Amy McMahon

    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

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

    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

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

      Reply
  8. tyler garrett

    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
  9. Adetutu

    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
  10. Name *Eduardo

    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
  11. Miroslav Bartík

    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
  12. Matthew

    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

      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

        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…

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.

Would you like to...

Get support privately?

Submit a support ticket via your account page.

Ask Ania?

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

Consult fellow students?

Join the conversation inside our private FB group.