Buttons

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 skundärer Aktion, das heißt, nach Wichtigkeit der Funktion, die durch den Button ausgelöst wird.


Standard

Grundsätzlich sollten unsere Buttons mindestens 165px breit sein, sowie links und rechts vom Text ein Padding von 32px einhalten. Ist die Beschriftung länger kann die Buttonbreite entsprechend vergrößert werden. Leicht abgerundete Ecken, Hover- und Kickeffekte verstärken den Eindruck und laden den Nutzer zum Klicken ein.

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

 

Für Mobile
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="">

 

Größen
Für Buttons wird eine einheitliche Größe verwendet. Ist die Beschriftung kürzer oder weniger Platz verhanden, so kann auch ein kleiner Button verwendet werden – hier sollte das Padding rund um den Text möglich gleichmäßig sein. Für spezielle Fälle, etwa den Kaufabschluss, kann ein extra großer, zweizeiliger Button verwendet werden.

Normal
Extra 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;
		}

Primär

Der blaue Button kennzeichnet die primäre Funktion, auf die der Nutzer hingelenkt werden soll. Zum Beispiel einen Login, Absenden oder Weiterleitung in den Sales-Funnel. Grundsätzlich sollte sich im sichtbaren Bereich des Nutzers jeweils nur ein Button mit primärer Aktion befinden.

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

Primäre Aktion inaktiv
Manchmal muss die primäre Aktion als „disabled“ dargestellt werden, um dem Nutzer anzuzeigen, dass zuvor eine andere Aktion nötig ist. Beispielsweise das Ausfüllen von allen Formularfeldern bevor der Prozess fortgesetzt werden kann.

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

Sekundär

Sekundäre Aktionen stehen häufig neben der primären Aktion, sind jedoch nicht ganz so wichtig. Beispielsweise wäre beim Login das Anmelden die primäre Aktion (= blauer Button) und die Funktion „Passwort vergessen“ die sekundäre Aktion (= grauer Button).

Normal
Extra Klein
.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: #F7F7F7;
    color: #4B4B4D;
}

Ghost

Ghost-Buttons werden ähnlich wie Buttons mit sekundärer Aktion eingesetzt, sind jedoch noch ein bisschen unwichtiger. Werden auch als sekundäre Aktion eingesetzt, wenn die rechteckige Button-Ansicht optisch unpassend ist.

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

Besondere CTA

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.

Action
		.bt-action {
			background-color: #79A000;
		}
		.bt-action:hover {
			background-color: #87b201;
		}
Error
		.bt-error {
			background-color: #C9242C;
		}
		.bt-error:hover {
			background-color: #E02831;
		}

Icons

Icons verstärken die Wirkung von Buttons, sollten jedoch sparsam und nicht um jeden Preis eingesetzt werden.

<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
Icons können links und rechts der Beschriftung dargestellt werden

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

Loading

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

<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');
	});
});

Icon und Loading State
Icon und Loading State kann auch kombiniert werden.

<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>