Documentation Home »
9bit Studios.com »

Color Button

Displays a color button with custom text and link.

Shortcode:


[colorbutton]

Attributes:


link
Can have the value of any valid link. This is the link the user will be taken to when they click on the button.

linebreak
Can have the value true or false. This determines whether the button will add a line break and continue the content that follows it on a new line. Set this value to false if you want to add multiple buttons one after another. Set it to true if you are going to begin a new paragraph below it. Even if you have a number of buttons lined up one after the other, you’ll definitely want the *last* button to have its linebreak value set to "true" so that the content that follows it will appear on a new line.

linkcolor
Can have any HTML hex color value (e.g. #336). This sets the color of the link. Be sure to include the "#" character in the value you set here as well.

backgroundcolor
Can have any HTML hex color value (e.g. #336). This sets the background color of the link. Be sure to include the "#" character in the value you set here as well.

bordercolor
Can have any HTML hex color value (e.g. #336). This sets the border color of the link. Be sure to include the "#" character in the value you set here as well.

Examples:


Here is an example of a single button...

[colorbutton link="https://www.website.com/moretext" linebreak="true" linkcolor="#fff" backgroundcolor="#231f74" bordercolor="#666"]Read More[/colorbutton]

Here is an example of 3 buttons that would be displayed next to each other...

[colorbutton link="https://www.website.com/moretext" linebreak="false" linkcolor="#fff" backgroundcolor="#231f74" bordercolor="#666"]Go Back[/colorbutton] [colorbutton link="https://www.website.com/moretext" linebreak="false" linkcolor="#fff" backgroundcolor="#231f74" bordercolor="#666"]Continue Reading[/colorbutton] [colorbutton link="https://www.website.com/moretext" linebreak="true" linkcolor="#fff" backgroundcolor="#231f74" bordercolor="#666"]Go Forward[/colorbutton]

Notice how the 3rd button has linebreak set to "true" so that content that follows this could continue on the next line.

Back to Shortcodes »