<a class="btn" href="#">Button</a>
        or
        <button class="btn">Button</button>
        or
        <input class="btn" type="submit" value="Button">
        

<button class="btn">Button</button>
            

<button class=" btn  btn--small ">Button</button>
            

<button class=" btn  btn--large ">Button</button>
            

<button class=" btn  btn--full ">Button</button>
            

<button class=" btn  btn--pill ">Button</button>
            

The buttons object provides the following modifiers:

• .btn--small
• .btn--large
• .btn--full
• .btn--pill

.btn--small and .btn--large vary the size of .btn. Each one has its own dedicated variable to control that size:

          $inuit-btn-padding--small:  halve($inuit-btn-padding) !default;
          $inuit-btn-padding--large:  double($inuit-btn-padding) !default;
          

.btn--full stretches the button along the full available width.

.btn--pill rounds the ends of the button.

                $inuit-btn-namespace:       $inuit-namespace !default;
                

You can alter the size of .btn with the $inuit-btn-padding varaible.

                $inuit-btn-padding:         halve($inuit-base-spacing-unit) !default;
                $inuit-btn-padding--small:  halve($inuit-btn-padding) !default;
                $inuit-btn-padding--large:  double($inuit-btn-padding) !default;
                

Furthermore you can change the basic theming of .btn:

                $inuit-btn-background:      #4a8ec2 !default;
                $inuit-btn-color:           #fff !default;
                $inuit-btn-border-width:    1px !default;
                $inuit-btn-border-style:    solid !default;
                $inuit-btn-border-color:    $inuit-btn-background !default;
                $inuit-btn-radius:          0 !default;
                

Enable modifiers

                $inuit-enable-btn--small:   false !default;
                $inuit-enable-btn--large:   false !default;
                $inuit-enable-btn--full:    false !default;
                $inuit-enable-btn--pill:    false !default;
                

                // Here we set a variable assuming that `box-sizing: border-box;` is not set
                // globally. If it has been previously been defined, the following variable will
                // be overriden and will be set to `true`.
                $inuit-global-border-box: false !default;