Button
shortcode

Create buttons with custom links. Add the icon and customize the styles to make the button 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;

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 settings – Allows you to set button background color and its hover background color;

Border settings – Set style, color, border radius 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 also choose the custom font family.

Default styles

Samples of preset styles without custom changes
Fade hover style
Button text
Button text
Button text
Button text
Button text
Button text
slide hover style
Button text
Button text
Button text
Button text
Button text
Button text
slide out hover style
Button text
Button text
Button text
Button text
Button text
Button text
slide in hover style
Button text
Button text
Button text
Button text
Button text
Button text
zoom out hover style
Button text
Button text
Button text
Button text
Button text
Button text
3d rotation hover style
Button textButton text
Button textButton text
Button textButton text
Button textButton text
Button textButton text
Button textButton text

Customized styles

Some variations of style customizations of the shortcode
custom style
Button text
Button text
Button text
Button text
Button text
Button text
custom style
Button textButton text
Button text
Button text
Button text
Button text
Button text