Button
You can use Butter Cake's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
You can remove border radius from buttons, cards etc... by setting sass variable$radius: falseFind the variable insidevars/variables.scssor use.radius-noneclass.
To turn any html tag into button just add .btn .(color), more colors available,
Only add .btn class, if you don't want a background color, check the examples below
Also can add .active class to any button to show active state.
Butter Cake includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
Regular Buttons
<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.
<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>
<a class="btn white rounded" href="#!">white</a>
Outline Buttons
Just add .outline class to a button to remove background color button.
<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>
<a class="btn white outline" href="#!">white</a>
Outline Rounded
Just add .outline and .rounded class to a button.
<a class="btn primary outline rounded" 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 rounded" href="#!">success</a>
<a class="btn warning outline rounded" href="#!">warning</a>
<a class="btn danger outline rounded" href="#!">danger</a>
<a class="btn dark outline rounded" href="#!">dark</a>
<a class="btn light outline rounded" href="#!">light</a>
<a class="btn white outline rounded" href="#!">white</a>
Loading Buttons
Just add .btn-loading class to the button and a span tag with the class of .loader and to make the loader active add .loader-active class to it.
Button Group
Group a series of buttons together on a single line with the button group
Wrap a series of buttons with .btn-group to group horizontally,
if you want to vertically simply add .btn-group .stacked-group class.
<div class="btn-group">
<button class="btn primary active">1</button>
<button class="btn primary">2</button>
<button class="btn primary">3</button>
<button class="btn primary">4</button>
</div>
<div class="btn-group">
<button class="btn primary">primary</button>
<button class="btn secondary">secondary</button>
<button class="btn success">success</button>
<button class="btn warning">warning</button>
</div>
<div class="btn-group">
<button class="btn primary outline">Outline</button>
<button class="btn primary outline">Outline</button>
<button class="btn primary outline">Outline</button>
<button class="btn primary outline">Outline</button>
</div>
<div class="btn-group stacked-group">
<button class="btn primary">primary</button>
<button class="btn secondary">secondary</button>
<button class="btn success">success</button>
<button class="btn warning">warning</button>
</div>
File picker Button
simply wrap file input inside .btn-choose-file
<button class="btn primary btn-choose-file">
Choose File
<input type="file">
</button>
Button Dropdown
To Create a Button Dropdown checkout the example below
Checkout the Dropdown page for more
<div class="dropdown btn primary">
<div>
Drop Down
</div>
<ul class="dropdown-menu">
<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.
Simply add .block class to .btn for block level button
<a class="btn primary btn lg" href="#!">Large Button</a>
<a class="btn primary btn sm" href="#!">Small Button</a>
<button class="btn primary block">Block Level Button</button>
<button class="btn secondary block">Block Level Button</button>
Button States
Make buttons look active by adding the .active class or make it look disabled by adding disabled attribute to the button.
<button class="btn primary active">Active Button</button>
<button class="btn primary" disabled>Disabled Button</button>
The .btn .(*) classes are designed to be used with the button , a tags 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).