Buttons and Message Boxes

Using built-in styles, you can easily add various buttons and message boxes:

Buttons

Small Buttons

Small Button Small Button Small Button
Small Button Small Button Small Button

Medium Buttons

Medium Button Medium Button Medium Button
Medium Button Medium Button Medium Button

Large Buttons

Large Button Large Button Large Button
Large Button Large Button Large Button

Adding Buttons

You can add a button with a single line of code below:
<a href="LINK" class="button SIZE COLOR">TEXT</a>

  • Replace LINK with the URL to point to when the button is clicked.
  • Replace SIZE with small, medium or large.
  • Replace COLOR with blue, green, red, orange, yellow, gray, or grey.
  • Replace TEXT with the text to be displayed on the button.

Message Boxes

Green / Success Message
Use success box to display a success or thank you message.
Blue / Info Box
Use info box to display an information message.
Red / Alert Message
Use alert box to display an error message.
Yellow / Note Box
Use note box to display any general note or warning message.
Gray / Message Box
Use message box to display any general note.

Adding Message Boxes

You can add a message box with a single line of code below:
<div class="MESSAGE_BOX_TYPE">MESSAGE</div>

or with the code below:
<div class="message-box COLOR">MESSAGE</div>

  • Replace MESSAGE_BOX_TYPE with the type of message box. Possible values are success-box, info-box, alert-box, note-box or message-box.
  • Replace COLOR with the type of message box. Possible values are green, blue, red, yellow or leave blank for default gray color.
  • Replace MESSAGE with the message you wish to display.

Leave a Reply