Shortcodes Ultimate

Button

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

Table of contents

Description
Options
Examples

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: Site URL
target	Button link target Default value: `self`
style	Button background style Possible values: `default` `flat` `ghost` `soft` `glass` `bubbles` `noise` `stroked` `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	Set this option to `yes` to make the button fullwidth Possible values: `yes` or `no` Default value: `no`
center	Is button centered on the page Possible values: `yes` or `no` Default value: `no`
radius	Button 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`
icon	You 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_color	Color 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_shadow	Button text shadow Possible values: CSS text-shadow shorthand property Default value: `none`
desc	A short description below the button text. This option is not compatible with icon.
download	A 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.
onclick	A custom JavaScript code for the `onclick` HTML attribute. This feature may be disabled on your site. Learn why.
rel	A custom value for the `rel` HTML attribute. Example values: `nofollow`, `lightbox`
title	A custom value for the `title` HTML attribute.
id	A custom value for the `id` HTML attribute.
class	Additional 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]

Opening link in a new tab

Open wordpress.org in a new tab

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

Button Button Button

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

Icons

Button with icon

[su_button icon="icon: star" icon_color="#fffc40"] Button with icon [/su_button]

Helpful?

🤝 Thank you!