Buttons

Default Style


Any button, input[type="button"], input[type="submit"] and .button-sq will be styled by defalut like this: 


<button>Button</button>
<input type="button" value="Button">
<input type="submit">

In button-sq.variables file, you will find the variables that change default button styling.

Small Style

You use .small-sq class.

Small Button 

<a href="" class="button-sq small-sq">Small Button</a>

See Through

You use .see-through-sq class

See Through Button See Through Small Button 

<a href="" class="button-sq see-through-sq">See Through Button</a>
<a href="" class="button-sq small-sq see-through-sq">See Through Small Button</a>

Link Style

You use .link-sq class.

Link Button Link Small Button 

<a href="" class="button-sq link-sq">Link Button</a>
<a href="" class="button-sq small-sq link-sq">Link Small Button</a>

Other Stiling Options

For other particular styles you can use the following classes:

  • .fullwidth-sq
  • .text-color
  • .text-secondary-color
  • .accent-color
  • .float-left-sq
  • .float-right-sq
  • .text-align-left-sq
  • .text-align-center-sq
  • .text-align-justify-sq
  • .text-align-right-sq
  • .text-transform-none-sq
  • .text-transform-lowercase-sq
  • .text-transform-uppercase-sq
  • .font-weight-normal-sq
  • .font-weight-normal-sq
  • .font-weight-bold-sq
  • .font-weight-extrabold-sq
  • .shadow-sq

Special Buttons

Cancel Button Google Button 

<a href="" class="button-sq cancel-sq">Cancel Button</a>
<a href="" class="button-sq facebook-button"><i class="icon icon-logo-facebook2"></i>Facebook Button</a>
<a href="" class="button-sq google-button"><i class="icon icon-logo-circle-google-plus-22"></i>Google Button</a>