Button
Das HTML-Element <button> stellt einen klickbaren Button dar und wird insbesondere zum Absenden von Formularen verwendet. Das Element kann in einem Artikel als neues Element Elementtyp › Text-Elemente › Button angelegt oder in jedem anderen Element mit einem Textfeld verwendet werden.
Basis-Klasse: .button
Angaben im Contao-Backend für CSS-ID immer ohne vorhergehende Raute #id und CSS-Klassen ohne vorhergehenden Punkt .klasse vornehmen. Mehrere Klassen sind durch ein Leerzeichen zu trennen.
Sub-Klassen für Varianten
| Button-Variante | CSS-Klasse | Beispiel | Webfarbe | RGB-Farbraum |
|---|---|---|---|---|
| Standard | .button-default |
#ffffff | R: 255 G: 255 B: 255 | |
| Hellgrau | .button-light |
#e9ecef | R: 233 G: 236 B: 239 | |
| Dunkelgrau | .button-dark |
#343a40 | R: 52 G: 58 B: 64 | |
| Erfolg (Grün) | .button-success |
#28a745 | R: 40 G: 167 B: 69 | |
| Info (Türkis) | .button-info |
#17a2b8 | R: 23 G: 162 B: 184 | |
| Warnung (Orange) | .button-warning |
#ffc107 | R: 255 G: 193 B: 7 | |
| Achtung (Rot) | .button-danger |
#dc3545 | R: 220 G: 53 B: 69 | |
| Primär (Blau) | .button-primary |
#007bff | R: 0 G: 123 B: 255 | |
| Sekundär (Grau) | .button-secondary |
#6c757d | R: 108 G: 117 B: 125 | |
| Hyperlink | .button-link |
#007bff | R: 0 G: 123 B: 255 | |
| Hyperlink in Klammern | .button-klammer-ink |
#007bff | R: 0 G: 123 B: 255 |