skeleton.css - Buttons

Buttons

The buttons get my colors of choice. And they are not to overlap, if screen gets tight.

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    color: #737373;
    background-color: transparent;
    border: 1px solid #737373;
    overflow: hidden;
    text-overflow: ellipsis;
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover,
    input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus,
    input[type="reset"]:focus, input[type="button"]:focus {
    color: #ffffff;
    border-color: #59B34D;
    background-color: #59B34D;
    outline: 0;
}

.button.button-primary, button.button-primary, input[type="submit"].button-primary,
    input[type="reset"].button-primary, input[type="button"].button-primary
    {
    color: #FFF;
    background-color: #59B34D;
    border-color: #59B34D;
    text-overflow: ellipsis;
}

.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover,
    input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover,
    .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus,
    input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus
    {
    color: #FFF;
    background-color: #737373;
    border-color: #737373;
}

A button used in context with the icons for social networks adapts to their style, i.e. uses less padding.

.button.social, .button.button-primary.social {
    padding: 0 5px;
}

Copyright © 2016 Uwe Ritzmann - Created with Pelican, Python and Skeleton.