einfache Buttons

Unterschiedliche Klassen bewirken jeweils nur eingeschränkte Effekte.

by Jens Grochtdreis

HTML

<button class="btn color1" type="submit">einfacher Button</button>
<button class="btn color2 cta" type="submit">super Button</button>

CSS

.btn {
    border: none;
    line-height: 1.5;
    font-size: 14px;
}

.color1 {
    background-color: #000;
    color:#fff;
}

.color1:hover, .color1:focus {
    background-color: #a5a5a5;
}

.color2 {
    background-color: #a20000;
    color:#fff;
}

.color2:hover, .color2:focus {
    background-color: #fd8700;
    color: #000;
}

.cta {
    font-size: 22px;
}

/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}

button {margin-bottom: 10px;}