Name
Email *
Message *

Button Shortcode

Parameter Required? Default Value Description
link Yes - The destination URL that will be opened when the button is clicked.
text Yes - The text displayed on the button.
icon No No icon The name of the icon to display. For example, use "download" to display a download icon. You can browse available icons on the Tabler Icons website (https://tabler.io/icons).
bg No Default Sets the button's background color using a HEX color code (for example, #ff0000). Leave it empty or set it to "default" to use the theme's default color.
color No Default Sets the button's text color using a HEX color code (for example, #ff0000). Leave it empty or set it to "default" to use the theme's default color.
target No Current tab Set this parameter to "_blank" to open the link in a new browser tab. Leave it empty to open the link in the current tab.

Usage Example:
[code]
[button link="https://example.com" text="Download" icon="download" bg="#2b9ffd" color="#ffffff" target="_blank"][/code]
[button link="https://example.com" text="Download" icon="download" bg="#2b9ffd" color="#ffffff" target="_blank"]

[hr]

Another example using the `eye` icon, a button color of `#d95711`, and without the `target` parameter.
[code][button link="https://example.com" text="Preview" icon="eye" bg="#d95711" color="#ffffff"][/code]
[button link="https://example.com" text="Preview" icon="eye" bg="#d95711" color="#ffffff"]

[hr]

Example of a default button shortcode without an icon, using only the `link` and `text` parameters.
[code][button link="https://example.com" text="Default 1"][/code]
[button link="https://example.com" text="Default 1"]

or
[code][button link="https://example.com" text="Default 2" bg="default" color="default"][/code]
[button link="https://example.com" text="Default 2" bg="default" color="default"]

[hr]

Example of a button without an icon using custom colors.
[code][button link="https://example.com" text="More info" bg="#27ae60" color="#ffffff"][/code]
[button link="https://example.com" text="More info" bg="#27ae60" color="#ffffff"]

Share this post