Divi Buttons
This page layout demonstrates different Button styles and hover effects for the Divi theme created by Ania Romańska from Divi Lover. Each Button style has a corresponding Code module with the CSS code. In this article you’ll find a video explanation of how it works.
Icons
CSS class: dl-icon-right
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-icon-left
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-icon-top
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-icon-bottom
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-icon-fade
Copy the code from this code module.
Copy the code from this code module.
Text on hover
CSS class: dl-hover-text-fade
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-hover-text-left
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-hover-text-right
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-hover-text-top
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-hover-text-bottom
Copy the code from this code module.
Copy the code from this code module.
Double borders
CSS class: dl-double-border-top-right
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-double-border-top-left
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-double-border-bottom-right
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-double-border-bottom-left
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-double-border-center
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-double-border-fade-out
Copy the code from this code module.
Copy the code from this code module.
Animated Lines
CSS class: dl-lines-horizontal
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-lines-left
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-lines-right
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-lines-center
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-lines-corners
Copy the code from this code module.
Copy the code from this code module.
Attention Grabbers
CSS class: dl-pulse
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-shadow-pulse
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-shake
Copy the code from this code module.
Copy the code from this code module.
CSS class: dl-border-pulse
Copy the code from this code module.
Copy the code from this code module.