Button gradient
shortcode

Create buttons with custom links. Add the icon and customize the styles to make the button with gradient background unique and noticeable.
Read documentation
Usage frequency
73%
Preset amount
80%
Customizability
97%

Available options

Default code: [dfd_button button_size="dfd-button-full-width" main_style="style-1" ]

Style – Choose between 5 preset styles;

Gradient direction – Specify the direction for the button’s background;

Hover style – Select among 12 preset hover styles;

Button size – Set the button to the full width or normal size;

Animation on click – Allows you to have animation on click on the button, set the color for the animation;

Main button settings – Add the button and tooltip text, set button and tooltip alignment, add the URL for the button;

Custom CSS Class – Type your own unique class name for the item – this is a useful option for those who want to create a specific style.
For example, you can type custom-style class and then go to Theme options -> General Options -> Custom CSS / JS -> Custom CSS and write your own CSS code with this class to get your own style;

Animation – Select among 14 appear effects;

Icon – Choose the icon for the button, set the icon size;

Button paddings – Add the left and right paddings for the button;

Color settings – Choose the text color and icon color, also you can set the hover colors for them;

Background gradient settings – Allows you to set button’s gradient background color and its hover gradient background color;

Border settings – Set style, color and width for the border;

Box shadow settings – Allows you to enable the box shadow for the button. You can choose shadow parameter and set the color. Also, you can set the shadow hover separately;

Typography – Select letter spacing, font size, line height and text color. You can choose the custom font family.

Default styles

Samples of preset styles without custom changes
FADE HOVER STYLE
slide hover style
slide out hover style
slide in hover style

Customized styles

Some variations of style customizations of the shortcode
custom style
custom style