[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

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

url

Button link

Default value: https://getshortcodes.com

target

Button link target

Possible values:

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

Default value: self

style

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

background

Button background color

Possible values: #HEX color

Default value: #2D89EF

color

Button text color

Possible values: #HEX color

Default value: #FFFFFF

size

Button size

Possible values: Number from 1 to 20

Default value: 3

wide

Fluid buttons has 100% width

Possible values: yes or no

Default value: no

center

Is button centered on the page

Possible values: yes or no

Default value: no

radius

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

icon

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.

icon_color

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

Possible values: #HEX color

Default value: #FFFFFF

text_shadow

Button text shadow

Possible values: CSS box/text-shadow shorthand property

Default value: none

desc

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

download

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.

onclick

Advanced JavaScript code for onClick action

rel

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

title

Here you can add value for the title attribute

id

Custom value for the ID attribute

class

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