Buttons

Design

Entwicklung

Primär-Button

Normal

.bt {
    color:#FFF;
    background-color: #006AB2;
    height: 48px;
    padding: 15px 32px;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 2px;
    box-sizing: border-box;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    text-align: center;
    min-width: 165px;
    text-decoration: none;
    line-height: 0;
}

.bt:hover {
    background-color: #2881bf;
}
.bt:focus {
    outline: none;
}
.bt:active {
    box-shadow: none;
    transform: translateY(1px);
    -webkit-transform: translateY(1px);
    -ms-transform: translateY(1px);
}

Reset der Default-Werte

Damit bei mobilen Geräten das Drücken auf einen Button als klick erkannt wird und bt:active erkannt wird muss ein entsprechendes ontouchstart Event zum dem Body-Tag hinzugefügt werden.

<body ontouchstart="">

Klein

.bt-small {
    padding: 0 16px;
    height: 34px;
    min-width: 95px;
}

Extra Groß, zweizeilig

.bt-big {
    height: 64px;
    min-width: 275px;
    line-height: 14px;
}
.bt-big span {
    font-size: 12px;
    font-weight: 300;
}

Sekundär-Button

Der Ghost-Button erbt alle CSS-Anweisungen der .bt-Klasse des primären Buttons. Folgende Anweisungen werden für den Sekundär-Button abgeändert:

.bt-secondary, .bt-secondary:hover {
    background-color: #F7F7F7;
    color: #4B4B4D;
}

Hinweis für Sekundäre Aktion

Um eine Sekundäre Aktion auf einer grauen Fläche besser hervorzuheben sollte diese immer mit einem weißen Hintergrund dargestellt werden.

.bt-secondary-light, .bt-secondary-light:hover {
    background-color: #FFFFFF;
    color: #4B4B4D;
}

Ghost-Button

Der Ghost-Button erbt alle CSS-Anweisungen der .bt-Klasse des primären Buttons. Folgende Anweisungen werden für den Ghost-Button abgeändert:

.bt-ghost {
    background-color: transparent;
    box-shadow: none;
    color: #4B4B4D;
}
.bt-ghost:hover {
    background-color: #F7F7F7;
}

Button + Icon

<button class="bt bt-icon-right">Mehr laden
    <svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="16px" height="16px" viewBox="0 0 16 16">
        <g><polygon fill="#fff" points="4.9,15.7 3.4,14.3 9.7,8 3.4,1.7 4.9,0.3 12.6,8 ">
            </polygon></g>
    </svg>
</button>

.bt-icon-right > svg {
    vertical-align: middle;
    margin-top: -4px;
    margin-left: 16px;
}
.bt-icon-right svg {
    float: right;
    margin: 2px 0 0 16px;
}
.bt-icon-left,
.bt-icon-right {
    line-height: 20px;
}

Platzierung der Icons

<button class="bt bt-icon-left">Mehr laden
    <svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="16px" height="16px" viewBox="0 0 16 16">
        <g><polygon fill="#fff" points="11.1,15.7 3.4,8 11.1,0.3 12.6,1.7 6.3,8 12.6,14.3  ">
            </polygon></g>
    </svg>
</button>

.bt-icon-left svg {
    float: left;
    margin: 2px 16px 0 0;
}
.bt-icon-right svg {
    float: right;
    margin: 2px 0 0 16px;
}

Vordefinierte Icons

Um SVG-Icons als background-image zu verwenden, müssen diese in Base64 codiert werden. www.base64encode.org

<button class="bt arrow-right-light">Mehr laden</button>
<button class="bt arrow-left-light">Mehr laden</button>
 
<button class="bt bt-secondary arrow-right-dark">Mehr laden</button>
<button class="bt bt-secondary arrow-left-dark">Mehr laden</button>

.arrow-left-dark {
    background: url("data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53
    y5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4P
    SIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+PGc+PHBvbHlnb24gZmlsb
    D0iIzRiNGI0ZCIgcG9pbnRzPSIxMS4xLDE1LjcgMy40LDggMTEuMSwwLjMgMTIuNiwxLjcgNi4z
    LDggMTIuNiwxNC4zICAiPjwvcG9seWdvbj48L2c+PC9zdmc+") #F7F7F7 no-repeat left 32px center !important;
    padding-left: 64px;
}
 
.arrow-left-light {
    background: url("data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vc
    mcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweC
    Igd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+PGc+PHBvbHlnb24gZmlsbD0iI2ZmZiIgcG9pbnRzPSIxMS4xLDE1Ljc
    gMy40LDggMTEuMSwwLjMgMTIuNiwxLjcgNi4zLDggMTIuNiwxNC4zICAiPjwv
    cG9seWdvbj48L2c+PC9zdmc+") #006AB2 no-repeat left 32px center !important;
    padding-left: 64px;
}
 
.arrow-right-dark {
    background: url("data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy5
    3My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcH
    giIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDE2IDE2Ij48Zz48cG9s
    eWdvbiBmaWxsPSIjNGI0YjRkIiBwb2ludHM9IjQuOSwxNS43IDMuNCwxNC4zIDkuNyw4IDMuNCwxLjcgNC45L
    DAuMyAxMi42LDggIj48L3BvbHlnb24+PC9nPjwvc3ZnPg==") #F7F7F7 no-repeat right 32px center !important;
    padding-right: 64px;
}
 
.arrow-right-light {
    background: url("data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy5
    3My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwc
    HgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDE2IDE2Ij48Zz48cG9s
    eWdvbiBmaWxsPSIjZmZmIiBwb2ludHM9IjQuOSwxNS43IDMuNCwxNC4zIDkuNyw4IDMuNCwxLjcgNC45LDAuMyA
    xMi42LDggIj48L3BvbHlnb24+PC9nPjwvc3ZnPg==") #006AB2 no-repeat right 32px center !important;
    padding-right: 64px;
}

Icon-Farben

.bt svg polygon,
.bt {
    fill: #FFF;
}
.bt-secondary svg polygon,
.bt-secondary,
.bt-ghost svg polygon,
.bt-ghost {
    fill: #4b4b4d;
}

Button mit Loading-State

<button class="bt bt-spinner">
    <svg class="loader spinner" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
          height="24px" viewBox="0 0 24 24">
         <g transform="translate(0, 0)">
             <circle opacity="0.4" fill="none" stroke="#ffffff" stroke-width="2"
                     stroke-linecap="round" stroke-miterlimit="10" cx="12" cy="12"
                     r="11" stroke-linejoin="round"></circle>
             <path class="nc-circle-03-easy" data-cap="butt" data-color="color-2"
                   fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10"
                   d="M12,1 c6.0751324,0,11,4.9248676,11,11" stroke-linejoin="round"
                   stroke-linecap="round" transform="rotate(0.03225876373045906 12 12)">
             </path>
         </g>
    </svg>
    <span>Weiter</span>
</button>

.bt-spinner > svg.loading {
    display: inline;
}
.spinner,
.bt-spinner > span.loading {
    display: none;
}

Für die Verwendung der Spinner wird zusätzlich eine CSS Animation benötigt:

.loader {
  -ms-animation: spin 1s cubic-bezier(0.5, 1, 0.30, 1) infinite;
  -webkit-animation: spin 1s cubic-bezier(0.5, 1, 0.30, 1) infinite;
  -o-animation: spin 1s cubic-bezier(0.5, 1, 0.30, 1) infinite;
  -moz-animation: spin 1s cubic-bezier(0.5, 1, 0.30, 1) infinite;
  animation: spin 1s cubic-bezier(0.5, 1, 0.30, 1) infinite;
}
 
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
 
@-ms-keyframes spin {
  0% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
  }
}
 
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}
 
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
 
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Für den Wechsel zwischen Text und Icon wird ein zusätzliches jQuery Script benötigt:

jQuery(function(){
    jQuery('a, button').click(function() {
        jQuery(this).children().toggleClass('loading');
    });
});

Button mit Icon und Loading-State

<button class="bt bt-spinner">
     <svg class="loader spinner" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
          height="24px" viewBox="0 0 24 24">
         <g transform="translate(0, 0)">
             <circle opacity="0.4" fill="none" stroke="#ffffff" stroke-width="2"
                     stroke-linecap="round" stroke-miterlimit="10" cx="12" cy="12"
                     r="11" stroke-linejoin="round"></circle>
             <path class="nc-circle-03-easy" data-cap="butt" data-color="color-2"
                   fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10"
                   d="M12,1 c6.0751324,0,11,4.9248676,11,11" stroke-linejoin="round"
                   stroke-linecap="round" transform="rotate(0.03225876373045906 12 12)">
             </path>
         </g>
    </svg>
    <span class="arrow-right-light">Anmelden</span>
</button>

Button Disabled

.disabled {
    background-color: #7FB4D9 !important;
    cursor: not-allowed;
}
.disabled:active {
    transform: translateY(0px);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

Button in Sonderfarben

.bt-action {
    background-color: #79A000;
}
.bt-action:hover {
    background-color: #87b201;
}

.bt-error {
    background-color: #C9242C;
}
.bt-error:hover {
    background-color: #E02831;
}

Button-Typen

Gut eingesetzte Buttons zeigen dem Nutzer nicht nur Optionen, sondern lenken ihn auf die erwünschte Aktion. Wir unterteilen beim Button-Design daher nach primärer oder sekundärer Aktion, das heißt, nach Wichtigkeit der Funktion, die durch den Button ausgelöst wird.

Primär-Button
Der blaue Button kennzeichnet die primäre Funktion, auf die der Nutzer gelenkt werden soll. Grundsätzlich sollte sich im sichtbaren Bereich des Nutzers jeweils nur ein Button mit primärer Aktion befinden.
Sekundär-Button
Sekundäre Aktionen sind nicht ganz so so wichtig wie primäre Aktionen. Beispielsweise wäre beim Login das „Anmelden“ die primäre Aktion und die Funktion „Passwort vergessen“ die sekundäre Aktion.
Ghost-Button
Ghost-Buttons sind optisch sehr reduziert, fallen daher weniger auf als die Standard-Buttons und kommen in der Hierarchie daher an dritter Stelle. Werden auch als sekundäre Aktion eingesetzt, wenn die rechteckige Button-Ansicht optisch unpassend ist.
Button + Icon
Icons verstärken die Wirkung von Buttons, sollten jedoch sparsam und nicht um jeden Preis eingesetzt werden. Icons können links oder rechts neben der Beschriftung platziert werden. Weiteres zum Thema Icon finden Sie hier

Größen und Abstände

Für Buttons wird eine einheitliche Größe verwendet. Ebenso für die Beschriftung, die immer 16px groß ist. Ist die Beschriftung kürzer oder weniger Platz vorhanden, so kann auch ein kleiner Button verwendet werden. Für spezielle Fälle, etwa den Kaufabschluss, kann ein extra großer, zweizeiliger Button verwendet werden.

Normal

Klein

Groß

Button-States

Unsere Buttons besitzen drei bis vier verschiedene states. Diese sind wichtig, um den Nutzer bei der Interaktion zu unterstützen und ihm visuelles Feedback zu geben.

Standard Primär

Standard Sekundär

Ghost

Loading-State

Falls die geklickte Funktion eine Wartezeit für den Nutzer zur Folge hat, sollte dieser sofort Feedback zur angestoßenen Aktion erhalten.

Typische Verwendung von Buttons

Ein typischer Einsatz unserer Button-Hierarchie sieht man vor allem auf Anmeldeseiten oder bei Pop-Ups. Hier können Buttons breiter sein, damit Sie optisch harmonischer wirken.

Buttons in Sonderfarben

In besonderen Fällen, etwa auf Landingpages oder Display-Banners, kann ein Button auch eine Sonderfarbe tragen. Hiermit sollte sparsam umgegangen werden, da dies nicht unsere typischen Markenfarben sind und die Farbe Rot häufig mit Abbrechen, Error etc. in Verbindung gebracht wird.

User-Button

Ist ein Nutzer angemeldet, steht rechts in der Navigationsleiste der User-Button. Die Small-Variante ist nur zu verwenden, wenn direkt neben dem User-Button in der Navigationsleiste noch weitere Buttons stehen (z.B. Warenkorb). Die Mobile-Variante wird bis 750px Bildschirmbreite eingesetzt.