Beveled buttons

The SquareMile template uses jQuery to create elegant beveled buttons from links and form buttons. To create a beveled button you only have to add a few CSS classes to the <a> tag or <input> tag and jQuery will do the rest.

Minimal example

In the minimal setup you will have to add to your HTML tag two classes:
jbtn + class-defining-button-size-and-style

To create a button like this use following code:

<a href="#" class="jbtn jbtn-medium-normal">jbtn-medium-normal</a>

Sizes and styles

This template gives you the choice of 3 button sizes and 3 styles:

jbtn-small-normal jbtn-small-neutral jbtn-small-special

jbtn-medium-normal jbtn-medium-neutral jbtn-medium-special

jbtn-large-normal jbtn-large-neutral jbtn-large-special

Additional CSS classes

jbtn-margin, jbtn-margin-small

By default the buttons are displayed inline and align well with the surrounding text. However, in many situations you will want to display the button in a separate line and add a bottom margin to it. To achieve this, simply add to the HTML tag one more class. Depending on the required margin size use either jbtn-margin or jbtn-margin-small.

jbtn-inset

The default look of a beveled button is outset with a slight drop-shadow. However, you can easily create a variant with an inset effect by adding one more CSS class: jbtn-inset.

Example: This button has inset effect applied

This is a small button This is a medium button This is a large button
with two lines of text

This is a small button This is a medium button This is a large button
with two lines of text

This is a small button This is a medium button This is a large button
with two lines of text

This is a small button This is a medium button This is a large button
with two lines of text

This is a small button This is a medium button This is a large button
with two lines of text

This is a small button This is a medium button This is a large button
with two lines of text