HTML-Elemente die Button-Styles unterstützen:


		<button class="btn">

		<a href="#" class="btn">

		<span class="btn">

		<input type="button" class="btn">

		<input type="submit" class="btn">

		<input type="reset" class="btn">

		<input type="text" class="btn"> (nur in speziellen Fällen)

Echte Beispiele aus dem Code:


		<button class="btn btn-ghost btn-theme" type="submit">Suchen</button>

		<button class="btn-theme js-collapse-trigger openFilter" aria-controls="newsfiltercat" type="button" aria-expanded="false" aria-label="Filter öffnen/schließen">Filter öffnen</button>

Theme Buttons (.btn-theme) - Echte Beispiele aus dem Code

Theme Buttons in verschiedenen Theme-Kontexten (alle verfügbaren)

Theme Scirocco Kontext:

Theme Gumleaf Kontext:

Theme Limette Kontext:

Theme Purple Kontext:

Theme Sage Kontext:

Theme Rust Kontext:

Theme Steelblue Kontext:

Theme Ochre Kontext:

Theme Green Kontext:

Theme Pink Kontext:

Ausgeschlossene Farben (haben KEINE .btn-theme Unterstützung):

Diese Farben sind aus der .btn-theme Schleife ausgeschlossen:

haze - wird übersprungen
twilight - wird übersprungen
westar - wird übersprungen (falls vorhanden)
lite - hat separate Implementierung
dark - hat separate Implementierung

CSS-Regel aus dem Framework:


		@each $c, $color in map.remove($colors, haze, twilight, westar, lite, dark) {

		  .theme-#{$c} .btn-theme { ... }

		}

Standard Button (.btn)

Link als Button Span als Button

Button Größen

Wie .btn-theme funktioniert

Das .btn-theme System:

Die .btn-theme Klasse ist sehr clever: Sie erbt automatisch die Farbe aus dem umgebenden Theme-Kontext!

CSS-Regel aus dem Framework:


		.theme-#{$c} .btn-theme {

		  background-color: map.get($colors, $c);

		}


		
		// Beispiel:

		.theme-scirocco .btn-theme { background-color: #6A7A71; }

		.theme-gumleaf .btn-theme { background-color: #AFC8B9; }

Echte Beispiele aus dem Code:


		<button class="btn btn-ghost btn-theme" type="submit">Suchen</button>

		<button class="btn-theme js-collapse-trigger" type="button">Filter öffnen</button>

Vorteile:

Ein Button passt sich automatisch an das umgebende Theme an
Kein manuelles Setzen von Farb-Klassen nötig
Konsistente Farbgebung im gesamten Theme-Kontext
Funktioniert mit .btn, .btn-ghost und auch alleine

Button Varianten

Button Farben (aus $colors)

Buttons mit Icons

Button Zustände

Button Modifikatoren

Pagination Buttons

...

Link-Btn vs Button Vergleich

LINK-BTN (aus Link-System)

Live CSS - Globale Button Overrides (echte Website)

Auf der echten Website werden ALLE Buttons überschrieben:


		.btn, [class^="btn-"], [class*=" btn-"] {

		  min-width: unset;

		  padding: 0 10px;

		  padding: 0;

		  height: auto;

		  color: #000;

		  background-color: #E6E6D7;

		  border: 1px solid #000;

		  border: none;

		}


		
		.btn span:not(.icon), [class^="btn-"] span:not(.icon), [class*=" btn-"] span:not(.icon) {

		  position: relative;

		  top: 0.05em;

		}

Unterschied zum Framework:

Framework: Override nur in .bootstrap-table Container

Live CSS: Override für ALLE Buttons global

Das bedeutet auf der echten Website:

Alle Buttons haben automatische Höhe (nicht 50px)
Alle Buttons haben kein Padding (nicht 0 20px)
Alle Buttons haben keine min-width (nicht 12em)
Spans in Buttons haben leichte vertikale Verschiebung

Wahrscheinlicher Grund:

Die Website verwendet eine angepasste/erweiterte Version des Frameworks, wo der Bootstrap Table Override global angewendet wird, um kompaktere Buttons zu haben.

Simulation der Live CSS (kleinere Buttons)

So sehen die Buttons auf der echten Website aus:

Button CSS-Eigenschaften

Standard Button Eigenschaften:

Größe: min-width: 12em, height: 50px, padding: 0 20px
Schrift: font-size: 0.75rem, text-transform: uppercase, font-weight: bold
Spacing: letter-spacing: 0.75px
Border: 3px solid transparent
Transition: 100ms linear
Display: inline-flex, align-items: center, justify-content: center

Small Button (.btn-s):

Größe: min-width: 8em, height: 30px, padding: 0 10px

Block Button (.btn-block):

Display: flex, width: 100%

Link Button (.btn-link):

Größe: min-width: 0
Hintergrund: transparent
Border: none

Alle verfügbaren Button-Klassen

Basis-Klassen:


		.btn - Standard Button

		.btn-s - Small Button

		.btn-block - Block Button

		.btn-ghost - Transparent mit Border

		.btn-link - Link-Style Button

Farb-Klassen:


		.btn-scirocco, .btn-gumleaf, .btn-limette, .btn-purple,

		.btn-sage, .btn-rust, .btn-steelblue, .btn-ochre,

		.btn-green, .btn-pink, .btn-dark, .btn-lite

Icon-Klassen:


		.btn-icon-left - Icon links vom Text

		.btn-icon-right - Icon rechts vom Text

		.btn-icon-above - Icon über dem Text

Modifikator-Klassen:


		.disabled - Deaktivierter Zustand

		.trim-left - Negativer linker Margin

		.trim-right - Negativer rechter Margin

		.trim - Entfernt Padding und Height

Pagination-Klassen:


		.pgn-list - Container für Pagination

		.pgn-item - Einzelnes Pagination Item

		.pgn-link - Pagination Button (min-width: 0)

		.pgn-ellipse - Auslassungspunkte

Theme-Klassen:


		.btn-theme - Erbt Farbe aus Theme-Kontext

		Funktioniert mit .theme-scirocco, .theme-gumleaf, etc.

JavaScript-Klassen (aus echten Beispielen):


		.js-collapse-trigger - JavaScript-Hook für Collapse

		.openFilter - Spezifische Filter-Funktionalität

zurück zur Übersicht