Buttons

[button href=”” target=”” css_classes=””][icon icon=”heart”][/icon]Button[/button]  [button href=”” target=”” css_classes=”button_blue”][icon icon=”thumbsup”][/icon]Button[/button]  [button href=”” target=”” css_classes=”button_orange”]Button[/button]  [button href=”” target=”” css_classes=”button_green”]Button[/button]  [button href=”” target=”” css_classes=”button_pale”]Button[/button]

[spacing margin=”no” border=”no”][/spacing]

[button href=”” target=”” css_classes=”small_button”][icon icon=”heart”][/icon]Button[/button] [button href=”” target=”” css_classes=”button_blue small_button”][icon icon=”thumbsup”][/icon]Button[/button] [button href=”” target=”” css_classes=”button_orange small_button”]Button[/button] [button href=”” target=”” css_classes=”button_green small_button”]Button[/button] [button href=”” target=”” css_classes=”button_pale small_button”]Button[/button]

[spacing margin=”no” border=”no”][/spacing]

[button href=”” target=”” css_classes=”tiny_button”][icon icon=”heart”][/icon]Button[/button] [button href=”” target=”” css_classes=”button_blue tiny_button”][icon icon=”thumbsup”][/icon]Button[/button] [button href=”” target=”” css_classes=”button_orange tiny_button”]Button[/button] [button href=”” target=”” css_classes=”button_green tiny_button”]Button[/button] [button href=”” target=”” css_classes=”button_pale tiny_button”]Button[/button]

[spacing margin=”no” border=”no”][/spacing]

[button href=”” target=”” css_classes=”regular_text”][icon icon=”heart”][/icon]Button[/button] [button href=”” target=”” css_classes=”button_blue regular_text”][icon icon=”thumbsup”][/icon]Button[/button] [button href=”” target=”” css_classes=”button_orange regular_text”]Button[/button] [button href=”” target=”” css_classes=”button_green regular_text”]Button[/button] [button href=”” target=”” css_classes=”button_pale regular_text”]Button[/button]

[spacing margin=”no” border=”no”][/spacing]

[button href=”” target=”” css_classes=”regular_text small_button”][icon icon=”heart”][/icon]Button[/button] [button href=”” target=”” css_classes=”button_blue small_button regular_text”][icon icon=”thumbsup”][/icon]Button[/button] [button href=”” target=”” css_classes=”button_orange small_button regular_text”]Button[/button] [button href=”” target=”” css_classes=”button_green small_button regular_text”]Button[/button] [button href=”” target=”” css_classes=”button_pale small_button regular_text”]Button[/button]

[spacing margin=”no” border=”no”][/spacing]

[button href=”” target=”” css_classes=”regular_text tiny_button”][icon icon=”heart”][/icon]Button[/button] [button href=”” target=”” css_classes=”button_blue tiny_button regular_text”][icon icon=”thumbsup”][/icon]Button[/button] [button href=”” target=”” css_classes=”button_orange tiny_button regular_text”]Button[/button] [button href=”” target=”” css_classes=”button_green tiny_button regular_text”]Button[/button] [button href=”” target=”” css_classes=”button_pale tiny_button regular_text”]Button[/button]

[spacing margin=”no” border=”no”][/spacing]

[spacing margin=”no” border=”yes”][/spacing]

[spacing margin=”no” border=”no”][/spacing]

Savia features a number of customizable buttons. Use the “Add a Button Link” button from your editor’s kitchen sink to add the button shortcode to your page/post.
By default it looks like this:

[button href="" target="" css_classes="e.g. button_hilite button_pale small_button"][/button]

This is where button customization starts – you can pass a URL link to the “href” param, you can also pass “_blank” to the “target” parameter and for the “css_classes” parameter you have quite a few options, where you can combine them, some are for size, some for text-style, some for colors:

For button colors your options are:

[checklist type=”dotted” margin_bottom=”yes”]

  • button_blue  – this option creates a blue button
  • button_orange  – this option creates an orange button
  • button_green  – this option creates a green button
  • button_pale  – this option creates a light button
  • button_hilite  – this option makes the button to inherit your Template Main HighLight color that you choose under Appearance->Customize.
  • Passing none of these values creates a dark button, that inherits your Template’s Main color as a hover color

[/checklist]

For size your options are:

[checklist type=”dotted” margin_bottom=”yes”]

  • small_button  – this option creates a blue button
  • tiny_button  – this option creates an orange button
  • Passing none of the above values for size creates a big button

[/checklist]

Finally you can add a CSS class for the font-style:

[checklist type=”dotted” margin_bottom=”yes”]

  • regular_text  – this option creates a simple regular text button with a small border radius

[/checklist]

Adding icons to your buttons

First off pick the icon you want to use (Features->Entypo Icons page in the Demo), then create your button and after setting all your parameters the way you want them add the “Icon” shortcode to it’s text by leaving just the icon parameter in like so:

[icon icon="heart"][/icon]

So the end result would be something like this:

[button href="http://google.com" target="_blank" css_classes="button_blue small_button"][icon icon="heart"][/icon] Cool Button[/button]