Use buttons to signal actions.
Read more buttons
Primary buttons
Alternate buttons
Buttons on a dark background
Big button
Resources
Code
<h6>Primary buttons</h6>
<div class="button-wrapper">
<button class="button btn btn-primary">Default</button> <button class="button btn btn-primary button-hover">Hover</button> <button class="button btn btn-primary focus">Focus</button> <button class="button btn btn-primary" disabled="">Disabled</button>
</div>
<h6>Alternate buttons</h6>
<div class="button-wrapper">
<button class="button-secondary">Default</button> <button class="button-secondary button-hover">Hover</button> <button class="button-secondary btn focus">Focus</button> <button class="button-secondary" disabled="">Disabled</button>
</div>
<h6>Buttons on a dark background</h6>
<div class="button-wrapper">
<div class="dark-bg">
<button class="button-secondary-inverse">Default</button> <button class="button-secondary-inverse button-hover">Hover</button> <button class="button-secondary-inverse btn focus">Focus</button> <button class="button-secondary-inverse" disabled="">Disabled</button>
</div>
</div>
<h6>Big button</h6>
<div class="button-wrapper">
<p> <button class="button-big">Default</button></p>
</div>
CSS
button {
padding: 2px 22px;
background-color: #f57e2a !important;
border-bottom-color: #f57e2a !important;
}
button:hover,
.btn-default:hover {
background-color: #fda500 !important;
}
.button,
a.button {
width: auto;
clear: both;
background: #f57e2a !important;
}
.button-wrapper {
display: table;
}
a.button {
text-decoration: none;
}
a.button:hover {
color: #ffffff;
}
.button-hover,
.button:hover {
background-color: #fda500 !important;
}
.button-secondary.button-hover {
background-color: #fff !important;
color: #fda500 !important;
border: 2px solid #fda500 !important;
}
.button-secondary {
background-color: #fff !important;
color: #f57e2a !important;
border: 2px solid #f57e2a !important;
}
.button-secondary:hover {
background-color: transparent !important;
border: 2px solid #fda500 !important;
color: #fda500 !important;
}
.button-secondary:disabled {
opacity: 0.5;
pointer-events: none;
}
.button-secondary-inverse.button-hover {
background-color: transparent !important;
color: #ddd !important;
border: 2px solid #ddd !important;
}
.button-secondary-inverse {
background-color: transparent !important;
color: #fff !important;
border: 2px solid #fff !important;
}
.button-secondary-inverse:hover {
background-color: transparent !important;
border: 2px solid #ddd !important;
color: #ddd !important;
}
.button-secondary-inverse:disabled {
opacity: 0.5;
pointer-events: none;
}
.button-big {
font-size: 1.9rem;
padding: 1.5rem 3rem;
font-weight: bold;
}