Buttons

Buttons can be added with the QT: Button widget but also with a shortcode. The default button shortcode can be used as follow:

[qt_button href=”https://youdomain.com/page”] Text on Button [/button]

You can add different attributes to the shortcode to change the styling:

Style: Change the look of the button; use primary or outline
Example: [qt_button style="primary"] Text on Button [/button]

Icon: Add a FontAwesome icon to the button
Example: [qt_button icon="fa-cog"] Text on Button [/button]

Target: Link the button to a new window, or not. To link in the same use _self or new _blank window
Example: [qt_button target="_self"] Text on Button [/button]

Edges: Makes the edges of the buttons rounded
Example: [qt_button edges="rounded"] Text on Button [/button]

Fullwidth: Makes the button fullwidth
Example: [qt_button fullwidth="true"] Text on Button [/button]

Text Color: Change the text color:
Example: [qt_button color="white"] Text on Button [/button]

Background Color: Change the background color:
Example: [qt_button background="red"] Text [/button]

Border Color: Change the border color, useful for the outline button:
Example: [qt_button border_color="red"] Text [/button]

Custom Class: Add a custom class to the button
Example: [qt_button custom_class="class-here"] Text [/button]

On the Font Awesome website you can see all available font classes you can use.

Was this page helpful?