buttons

You can use Butter Cake's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more and easiy to customize.

You can remove border radius from buttons, cards etc... by setting sass variable $radius: false
or use .radius-none class
Find the variable inside vars/variables.scss

To turn any html tag into button just add .btn-*, more colors availables,
Only add .btn class, if you don't want a background color, check the examples below

Examples

Butter Cake includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Regular Buttons

primary secondary gray success info warning danger dark light white 
<a class="btn-primary" href="#!">primary</a>
<a class="btn-secondary" href="#!">secondary</a>
<a class="btn-gray" href="#!">gray</a>
<a class="btn-success" href="#!">success</a>
<a class="btn-info" href="#!">info</a>
<a class="btn-warning" href="#!">warning</a>
<a class="btn-danger" href="#!">danger</a>
<a class="btn-dark" href="#!">dark</a>
<a class="btn-light" href="#!">light</a>
<a class="btn-white" href="#!">white</a>

Rounded Buttons

Just add .rounded class to a button to get curved shape button.

primary secondary gray success warning danger dark light 
<a class="btn-primary rounded" href="#!">primary</a>
<a class="btn-secondary rounded" href="#!">secondary</a>
<a class="btn-gray rounded" href="#!">gray</a>
<a class="btn-success rounded" href="#!">success</a>
<a class="btn-warning rounded" href="#!">warning</a>
<a class="btn-danger rounded" href="#!">danger</a>
<a class="btn-dark rounded" href="#!">dark</a>
<a class="btn-light rounded" href="#!">light</a>

Outline Buttons

Just add .outline class to a button to remove background color button.

primary secondary gray success warning danger dark light 
<a class="btn-primary outline" href="#!">primary</a>
<a class="btn-secondary outline" href="#!">secondary</a>
<a class="btn-gray outline" href="#!">gray</a>
<a class="btn-success outline" href="#!">success</a>
<a class="btn-warning outline" href="#!">warning</a>
<a class="btn-danger outline" href="#!">danger</a>
<a class="btn-dark outline" href="#!">dark</a>
<a class="btn-light outline" href="#!">light</a>

Outline Rounded Buttons

Just add .outline and .rounded class to a button.

primary secondary gray success warning danger dark light 
<a class="btn-primary outline" href="#!">primary</a>
<a class="btn-secondary outline rounded" href="#!">secondary</a>
<a class="btn-gray outline rounded" href="#!">gray</a>
<a class="btn-success outline" href="#!">success</a>
<a class="btn-warning outline" href="#!">warning</a>
<a class="btn-danger outline" href="#!">danger</a>
<a class="btn-dark outline" href="#!">dark</a>
<a class="btn-light outline" href="#!">light</a>

Button Group

Group a series of buttons together on a single line with the button group

Wrap a series of buttons with .button-group. 

<div class="button-group">
    <button class="btn-primary">1</button>
    <button class="btn-primary">2</button>
    <button class="btn-primary">3</button>
    <button class="btn-primary">4</button>
</div>

Button Dropdown

To Create a Button Dropdown checkout the example below

Drop Down

Checkout Dropdown Page for more

<div class="dropdown btn-primary">
    <div>Drop Down <i class="fa fa-angle-down"></i></div>

    <ul class="dropdown-menu list-unstyled">
        <li><a href="#!">Link 2</a></li>
        <li><a href="#!">Link 3</a></li>
        <li><a href="#!">Link 4</a></li>
    </ul>
</div>

Button Sizes

Need larger or smaller buttons? Just add .btn-lg or .btn-sm for additional sizes.

Large Button
Large Button Large Button 
<a class="btn-primary btn-lg" href="#!">Large Button</a>
<a class="btn-secondary btn-lg" href="#!">Small Button</a>
Small Button
Small Button Small Button 
<a class="btn-primary btn-sm" href="#!">Small Button</a>
<a class="btn-secondary btn-sm" href="#!">Small Button</a>
Block Level Buttons

To Create block level buttons just .block button will take the full width of the parent element 

<button class="btn-primary block">Block Level Button</button>
<button class="btn-secondary block">Block Level Button</button>
You can use any tag, in this sample I have used button tag

Disabled state

Make buttons look inactive by adding the disabled boolean attribute or disabled class to any element.

<button class="btn-primary disabled">Disabled Button</button>
<button class="btn-secondary" disabled>Disabled Button</button>

Extra Info

The .btn-* classes are designed to be used with the button element. However, you can also use these classes on a or input or any other elements (though some browsers may apply a slightly different rendering).