[su_button url="#" target="blank" style="3d" background="#2D89EF" color="#FFFFFF" size="3"]Button[/su_button]
[su_button url="#" size="6" style="default" background="#00b512" color="#ffffff"]Button[/su_button]
[su_button url="#" size="8" style="ghost" background="#ff270f" color="#ff270f"]Button[/su_button]

Description

This shortcode allows you to create highly customizable buttons. You can change button style, colors, size, add an icon or description. One of the most powerful shortcodes of the plugin.

Options

Option namePossible valuesDefault value
url
Button link
Any text valuehttps://getshortcodes.com
target
Button link target
self (Open in same tab)
blank (Open in new tab)
self
style
Button background style preset
default (Default)
flat (Flat)
ghost (Ghost)
soft (Soft)
glass (Glass)
bubbles (Bubbles)
noise (Noise)
stroked (Stroked)
3d (3D)
default
background
Button background color
#HEX color#2D89EF
color
Button text color
#HEX color#FFFFFF
size
Button size
Number from 1 to 203
wide
Fluid buttons has 100% width
yes or nono
center
Is button centered on the page
yes or nono
radius
Radius of button corners. Auto-radius calculation based on button size
auto (Auto)
round (Round)
0 (Square)
5 (5px)
10 (10px)
20 (20px)
auto
icon
You can upload custom icon for this button or pick a built-in icon
Fork Awesome icon name (with “icon:” prefix) or image URL. Examples: icon: star, http://example.com/icon.png. See available Fork Awesome icons.– none –
icon_color
This color will be applied to the selected icon. Does not works with uploaded icons
#HEX color#FFFFFF
text_shadow
Button text shadow
CSS box/text-shadow shorthand propertynone
desc
Small description under button text. This option is incompatible with icon.
Any text value– none –
onclick
Advanced JavaScript code for onClick action
Any text value– none –
rel
Here you can add value for the rel attribute.
Example values: nofollow, lightbox
Any text value– none –
title
Here you can add value for the title attribute
Any text value– none –
id
Custom value for the ID attribute
Any text value– none –
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)– none –