Buttons

Buttons are a good way to present links or submission buttons on forms. Furatto makes it really easy to achieve it, by using the default ones or create your owns.

Buildng the markup

The markup to create a button is fairly simple, and short.

   
<a href="#" class="button">Button</a>
   

Button variations

You can change the .button element look & feel by appending class modifiers, such as for colors, size, border.

   
<a href="#" class="button">Button</a>
<a href="#" class="button [primary danger warning success]">Button</a>
<a href="#" class="button [radius pill block disabled alpha]">Button</a>
<a href="#" class="button [xxlarge xlarge large small mini]">Button</a>
   

Available sass variables

You can customize the buttons really easy by changing the our Sass variables.

  
//Padding sizes for buttons
$button-default: px-to-rems(4) px-to-rems(13) !default;
$button-mini: 0 px-to-rems(6) !default;
$button-small: px-to-rems(2) px-to-rems(11) !default;
$button-large:  px-to-rems(12) px-to-rems(21) !default;
$button-xlarge: px-to-rems(22) px-to-rems(34) !default;
$button-xxlarge: px-to-rems(22.72) px-to-rems(22) px-to-rems(57) !default;

//Buttons style
$button-display: inline-block !default;
$button-border-width: 1px !default;
$button-border-style: solid !default;
$button-default-background-color: #2E323E !default;

//Buttons general styles
$button-font-family: $base-font-family !default;
$button-font-color: #FFF !default;
$button-font-weight: 300 !default;
$button-font-default: px-to-rems(14) !default;
$button-font-mini: px-to-rems(11) !default;
$button-font-small: px-to-rems(12) !default;
$button-font-large: px-to-rems(16) !default;
$button-font-xlarge: px-to-rems(22) !default;
$button-font-xxlarge: px-to-rems(22) !default;
$button-vertical-separation: px-to-rems(5) !default;

//Buttons variations
$button-radius: px-to-rems(3) !default;
$button-alpha-border: 1px solid #FFF !default;
$button-alpha-color: #FFF !default;
$button-3d-border-width: px-to-rems(3) !default;
$button-pill-radius: px-to-rems(1000) !default;
$button-disabled-opacity: 0.65 !default;

//Icons
$button-icon-separation: 5px !default;

//Background variations
$button-primary-background: #3498db !default;
$button-success-background: #2ecc71 !default;
$button-danger-background: #e74c3c !default;
$button-warning-background: #e67e22 !default;

//Media queries
$button-block-media-query-width: px-to-rems(480) !default;
  

Advance usage

Don't feel like using the built-in buttons work for you?, don't worry we have included a mixin for you to create your own.

     
@mixin button($background-color: $button-default-background-color, 
           $padding: $button-default, 
           $font-size: $button-font-default, 
           $include-radius-style: true, 
           $include-block-style: true,
           $include-pill-style: true) {
  @include button-base;
  @include button-style($background-color);
  @include button-size($padding, $font-size);
  
  @if $include-radius-style {
    &.radius {
      @include border-radius($button-radius);
    }
  }

  @if $include-block-style {
    &.block {
      display: block;
      width: 100%;
      padding-left: 0px;
      padding-right: 0px;
    }
  }

  @if $include-pill-style {
    &.pill {
      @include border-radius($button-pill-radius);
    }
  }

  @media (max-width: $button-block-media-query-width) {
    & {
      display: block;
      width: 100%;
    }
  }
}
     
  

Creating your buttons

So to create your own buttons simply call the mixin like shown below, and send the variables you want to change to meet your needs.

       
 .my-super-button {
    @include button;
 } 
       
    

       
<a href="#" class="my-super-button">Button</a>
       
    

Further usage...

For a more advance usage for creating buttons, check out the _buttons.scss file.