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.
CSS class: dl-icon-left
Copy the code from this code module.
CSS class: dl-icon-top
Copy the code from this code module.
CSS class: dl-icon-bottom
Copy the code from this code module.
CSS class: dl-icon-fade
Copy the code from this code module.

Text on hover

CSS class: dl-hover-text-fade
Copy the code from this code module.
CSS class: dl-hover-text-left
Copy the code from this code module.
CSS class: dl-hover-text-right
Copy the code from this code module.
CSS class: dl-hover-text-top
Copy the code from this code module.
CSS class: dl-hover-text-bottom
Copy the code from this code module.

Double borders

CSS class: dl-double-border-top-right
Copy the code from this code module.
CSS class: dl-double-border-top-left
Copy the code from this code module.
CSS class: dl-double-border-bottom-right
Copy the code from this code module.
CSS class: dl-double-border-bottom-left
Copy the code from this code module.
CSS class: dl-double-border-center
Copy the code from this code module.
CSS class: dl-double-border-fade-out
Copy the code from this code module.

Animated Lines

CSS class: dl-lines-horizontal
Copy the code from this code module.
CSS class: dl-lines-left
Copy the code from this code module.
CSS class: dl-lines-right
Copy the code from this code module.
CSS class: dl-lines-center
Copy the code from this code module.
CSS class: dl-lines-corners
Copy the code from this code module.

Attention Grabbers

CSS class: dl-pulse
Copy the code from this code module.
CSS class: dl-shadow-pulse
Copy the code from this code module.
CSS class: dl-shake
Copy the code from this code module.
CSS class: dl-border-pulse
Copy the code from this code module.
Translate »