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 |
#f8f9fa | R: 248 G: 249 B: 250 | |
| Dunkelgrau | .button-dark |
#212529 | R: 33 G: 37 B: 41 | |
| Erfolg (Grün) | .button-success |
#198754 | R: 25 G: 135 B: 84 | |
| Info (Türkis) | .button-info |
#0dcaf0 | R: 13 G: 202 B: 240 | |
| 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 |
#0d6efd | R: 13 G: 110 B: 253 | |
| Sekundär (Grau) | .button-secondary |
#6c757d | R: 108 G: 117 B: 125 | |
| Hyperlink | .button-link |
#0d6efd | R: 13 G: 110 B: 253 | |
| Hyperlink in Klammern | .button-bracket-link |
#0d6efd | R: 13 G: 110 B: 253 |