Buttons

<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>                    

          
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;
}