[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]

Table of contents

  1. Description
  2. Options
    1. url
    2. target
    3. style
    4. background
    5. color
    6. size
    7. wide
    8. center
    9. radius
    10. icon
    11. icon_color
    12. text_shadow
    13. desc
    14. download
    15. onclick
    16. rel
    17. title
    18. id
    19. class


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.



Button link

Default value: https://getshortcodes.com


Button link target

Possible values:

  • self (Open in same tab)
  • blank (Open in new tab)

Default value: self


Button background style preset

Possible values:

  • default (Default)
  • flat (Flat)
  • ghost (Ghost)
  • soft (Soft)
  • glass (Glass)
  • bubbles (Bubbles)
  • noise (Noise)
  • stroked (Stroked)
  • 3d (3D)

Default value: default


Button background color

Possible values: #HEX color

Default value: #2D89EF


Button text color

Possible values: #HEX color

Default value: #FFFFFF


Button size

Possible values: Number from 1 to 20

Default value: 3


Fluid buttons has 100% width

Possible values: yes or no

Default value: no


Is button centered on the page

Possible values: yes or no

Default value: no


Radius of button corners. Auto-radius calculation based on button size

Possible values:

  • auto (Auto)
  • round (Round)
  • 0 (Square)
  • 5 (5px)
  • 10 (10px)
  • 20 (20px)

Default value: auto


You can upload custom icon for this button or pick a built-in icon

Possible values: Fork Awesome icon name (with “icon:” prefix) or image URL. Examples: icon: star, http://example.com/icon.png. See available Fork Awesome icons.


This color will be applied to the selected icon. Does not works with uploaded icons

Possible values: #HEX color

Default value: #FFFFFF


Button text shadow

Possible values: CSS box/text-shadow shorthand property

Default value: none


Small description under button text. This option is incompatible with icon.


The non-empty download attribute indicates that the button URL will be downloaded when a user clicks on the button. The value of the attribute will be the name of the downloaded file. For example, the following shortcode will display a download link. After clicking this link, the browser will start downloading file.mp3 with the name My-File.mp3:

[su_button url="https://example.com/file.mp3" download="My-File"] Download [/su_button]

The download attribute is not supported in IE or Edge (prior version 18), or in Safari (prior version 10.1). Browser compatibility.


Advanced JavaScript code for onClick action


Here you can add value for the rel attribute.
Example values: nofollow, lightbox


Here you can add value for the title attribute


Custom value for the ID attribute


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