THE WEEKEND SALE

GET ADD-ONS BUNDLE WITH 34% OFF

ONLY 13 HOURS LEFT

GET ADD-ONS BUNDLE – FROM ONLY $39

DISCOUNT CODE APPLIED AUTOMATICALLY

Button

[su_button url="#" target="blank" style="3d" background="#2D89EF" color="#FFFFFF" size="3"]Button[/su_button]

Table of contents

  1. Description
  2. Options
  3. Examples
    1. Button styles
    2. Opening link in a new tab
    3. The download option
    4. Aligning buttons horizontally
    5. Icons

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

urlButton link

Default value: Site URL
targetButton link target

Default value: self
styleButton background style

Possible values:
default
flat
ghost
soft
glass
bubbles
noise
stroked
3d

Default value: default
backgroundButton background color

Possible values: #HEX color
Default value: #2D89EF
colorButton text color

Possible values: #HEX color
Default value: #FFFFFF
sizeButton size

Possible values: Number from 1 to 20
Default value: 3
wideSet this option to yes to make the button fullwidth

Possible values: yes or no
Default value: no
centerIs button centered on the page

Possible values: yes or no
Default value: no
radiusButton border radius. Automatic calculation of the radius is based on the button size

Possible values:
auto
round
0 (Square)
5 (5px)
10 (10px)
20 (20px)

Default value: auto
iconYou can upload a custom icon for this button or use a built-in one

Possible values: Fork Awesome icon name with icon: prefix or image URL.
Example values: icon: star, http://example.com/icon.png

The list of available Fork Awesome icons
icon_colorColor of the vector icon used in the icon option. This color won’t be applied to uploaded images.

Possible values: #HEX color
Default value: #FFFFFF
text_shadowButton text shadow

Possible values: CSS text-shadow shorthand property
Default value: none
descA short description below the button text. This option is not compatible with icon.
downloadA non-empty download attribute tells the browser that the button URL should be downloaded when a user clicks on the button. The value of the attribute will be the name of the downloaded file. The download attribute is not supported in IE or Edge (prior version 18) and in Safari (prior version 10.1). Browser compatibility.
onclickA custom JavaScript code for the onclick HTML attribute.
relA custom value for the rel HTML attribute.

Example values: nofollow, lightbox
titleA custom value for the title HTML attribute.
idA custom value for the id HTML attribute.
classAdditional CSS class name(s) separated by space(s)

Examples

Button styles

[su_button url="#" style="default"] Style: Default [/su_button]

[su_button url="#" style="flat" size="5" radius="0"] Style: Flat [/su_button]

[su_button url="#" style="ghost" color="#2D89EF"] Style: Ghost [/su_button]

[su_button url="#" style="soft"] Style: Soft [/su_button]

[su_button url="#" style="glass"] Style: Glass [/su_button]

[su_button url="#" style="bubbles"] Style: Bubbles [/su_button]

[su_button url="#" style="noise"] Style: Noise [/su_button]

[su_button url="#" style="stroked"] Style: Stroked [/su_button]

[su_button url="#" style="3d"] Style: 3d [/su_button]
[su_button url="https://wordpress.org/" target="blank"] Open wordpress.org in a new tab [/su_button]

The download option

The following shortcode will display a download link. After clicking this link, the browser should start downloading file.jpg with the name My-File.jpg:

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

This option may not work in particular browsers and server environments. Make sure your server is sending the correct response headers.

Aligning buttons horizontally

To align a few buttons horizontally, just remove newlines between them:

[su_button] Button [/su_button] [su_button] Button [/su_button] [su_button] Button [/su_button]

Icons

[su_button icon="icon: star" icon_color="#fffc40"] Button with icon [/su_button]
Helpful?
🤝 Thank you!