skeleton.css - Schaltflächen

Die Schaltflächen

Die Schaltflächen werden an das Farbschema angepasst und sollen sich nicht überlappen, wenn es eng wird.

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

Eine Schaltfläche im Kontext der Ikonen für soziale Netzwerke soll sich optisch daran etwas anpassen, d.h. mit weniger padding auskommen.

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

Copyright © 2016 Uwe Ritzmann - Erstellt mit Pelican, Python und Skeleton.