Button Stylez

Basis Buttons (Solid Style)

Standard Farb-Varianten:

<button class="btn btn-primary">Primary</button>

Hollow/Outline Buttons

Outline Varianten:

<button class="btn btn-hollow btn-primary">Primary</button>

Clear/Ghost Buttons

Transparente Varianten:

<button class="btn btn-clear btn-primary">Primary</button>

Größen-Varianten

Verschiedene Größen:

                <button class="btn btn-primary btn-tiny">Tiny</button>

                <button class="btn btn-primary btn-small">Small</button>

                <button class="btn btn-primary">Normal</button>

                <button class="btn btn-primary btn-large">Large</button>

Rounded Buttons

Mit abgerundeten Ecken:

<button class="btn btn-primary btn-rounded">Primary Rounded</button>

Expanded Buttons (Volle Breite)

Block-Level Buttons:

<button class="btn btn-primary btn-expanded">Expanded Button</button>

Disabled State

Deaktivierte Buttons:

                <button class="btn btn-primary" disabled>Disabled</button>

                <button class="btn btn-primary disabled">Disabled</button>

Button Groups

Horizontal Button Group:

Mit verschiedenen Farben:

Vertical Button Group:

                <div class="btn-group">

                  <button class="btn btn-primary">Links</button>

                  <button class="btn btn-primary">Mitte</button>

                  <button class="btn btn-primary">Rechts</button>

                </div>

Icon Buttons

Buttons mit Icons (Beispiel mit Unicode):

Icon-Only Buttons:

Icon-Only verschiedene Größen:

<button class="btn btn-primary btn-icon">
<span>➕</span>
<span>Hinzufügen</span>
</button>

<button class="btn btn-primary btn-icon-only">➕</button>

Kombinierte Beispiele

Große Hollow Rounded Buttons:

Kleine Clear Buttons:

Verwendung in deinem Blueprint Theme

1. CSS einbinden

<link rel="stylesheet" href="path/to/blueprint-buttons.css">

2. Dark Mode aktivieren

Füge das Attribut data-theme="dark" zum body oder einem Container hinzu:

                <body data-theme="dark">

                Oder alternativ:

                <body class="dark-mode">

3. Farben anpassen

Du kannst die Farben zentral über CSS Custom Properties anpassen:

                :root {

                  --btn-primary: #deineFarbe;

                  --btn-primary-hover: #deineFarbeHover;

                  /* etc. */

                }

4. Border-Radius global ändern

                :root {

                  --btn-border-radius: 4px; /* Für leicht gerundete Ecken */

                }

Klassen-Referenz

Basis-Klassen

.btn oder .button – Basis Button Klasse

Farb-Varianten

.btn-primary – Primärfarbe
.btn-secondary – Sekundärfarbe
.btn-success – Erfolg (Grün)
.btn-warning – Warnung (Orange)
.btn-danger – Gefahr (Rot)
.btn-info – Info (Blau)

Style-Varianten

.btn-hollow oder .btn-outline – Transparenter Hintergrund, nur Rahmen
.btn-clear oder .btn-ghost – Komplett transparent

Größen

.btn-tiny – Sehr klein
.btn-small – Klein
Keine Klasse – Normal (Standard)
.btn-large – Groß
.btn-xlarge – Sehr groß

Spezial-Klassen

.btn-expanded – Volle Breite (Block-Level)
.btn-rounded – Stark abgerundete Ecken
.disabled oder disabled Attribut – Deaktiviert
.btn-icon – Button mit Icon
.btn-icon-only – Nur Icon, kein Text

Gruppen

.btn-group – Horizontale Button-Gruppe
.btn-group-vertical – Vertikale Button-Gruppe