This shortcode allows you to create highly customisable buttons. You can change button style, colours, size, add an icon or description.

[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]
Option name Possible values Default value
url
Button link
Any text value http://su.dev
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 20 3
wide
Fluid buttons has 100% width
yes or no no
center
Is button centered on the page
yes or no no
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
FontAwesome icon name (with “icon:” prefix) or icon image URL. Examples: icon: star, http://example.com/icon.png

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 property none
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

class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)

none