Buttons

Buttons UI

by davidpauljunior

HTML

<button class="Btn Btn--primary Btn--m">
    Button
</button>

CSS

.Btn {
    display: inline-block;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    background: transparent;
    padding: 0;
    border: 1px solid transparent;
    white-space: nowrap;
    outline: none;
    border-radius: 3px;
}

.Btn--m {
    padding: 10px 20px;
    font-size: 16px;
}

.Btn--primary {
    background-color: #4387fd;
    background-image: -webkit-linear-gradient(top,#4387fd,#4683ea);
    background-image: linear-gradient(center top , #4387fd, #4683ea);
    color: white;
}

.Btn--primary:hover {
    /* Gets lighter on hover */
}


.Btn--primary:focus {
    /* Gets darker on focus */
}