dev/buttons.md

 Template Button Designs
-======
\ No newline at end of file
+======
+
+
+Das Template bietet vordefinierte Klasse für Buttons an. Um sie zu benutzen, muss die Klasse `.btn` auf das gewünschte Element gesetzt werden. So wird schon das Grundaussehen angepasst (mit Blau als Hauptfarbe). Das vorgefertigte Aussehen funktioniert auch für folgende Elemente ohne diese CSS-Klasse:
+
+```html
+<!-- no css class required but recommended -->
+<button>Button</button>
+<input type="button" />
+<input type="send" />
+<input type="reset" />
+
+<!-- other elements (like <a>) require at least ".btn" css class  -->
+<a href="#" class="btn">Button</a>
+
+```
+
+Auch die **QUI Buttons** (`.qui-button`) werden überschrieben, wenn zusätzlich die Klasse `.btn` hinzugefügt wird.
+
+Mehrere designs
+======
+
+Die Buttons sind in verschiedenen Designs vorbereitet (basiert an _Bootstrap 4_ und _Bulma_ Frameworks). Um sie zu benutzen muss neben muss einfach eine der folgenden Klassen neben der `.btn` Klasse gesetzt werden:
+
+*  .btn-primary
+*  .btn-secondary
+*  .btn-success
+*  .btn-danger
+*  .btn-warning
+*  .btn-info
+*  .btn-dark
+*  .btn-light
+*  .btn-link
+
+```html
+<a class="btn btn-primary">Primary</a>
+<a class="btn btn-secondary">Secondary</a>
+<a class="btn btn-success">Success</a>
+<a class="btn btn-danger">Danger</a>
+<a class="btn btn-warning">Warning</a>
+<a class="btn btn-info">Info</a>
+<a class="btn btn-dark">Dark</a>
+<a class="btn btn-light">Light</a>
+<a class="btn btn-link">Link</a>
+```
+
+Ergibt:
+
+![image](/uploads/34eca42c5902465ce3f16e33b538cc1d/image.png)
+
+Outline version
+=======
+Jeder Button (bis auf `.btn-link`) hat auch alternatives Design. Das gewünschte Element muss zusätzlich die Klasse `.btn-outline` haben.
+
+```html
+<button class="btn-outline">Button</button>
+<button class="btn-primary btn-outline">Primary</button>
+<button class="btn-secondary btn-outline">Secondary</button>
+<button class="btn-success btn-outline">Success</button>
+<button class="btn-danger btn-outline">Danger</button>
+<button class="btn-warning btn-outline">Warning</button>
+<button class="btn-info btn-outline">Info</button>
+<button class="btn-dark btn-outline">Dark</button>
+<button class="btn-light btn-outline">Light</button>
+```
+
+Ergibt:
+
+![image](/uploads/5c1db63062f3ce20985ee6637bfa3d09/image.png)
+
+
+Disabled
+======
+
+Sowohl das Standard Desing als auch die Outline Version unterstützen das `:disabled` HTML Attribut.
+
+**Wichtig**
+
+Weil das Attribut nicht bei allen Elementen gesetzt werden kann, muss z.B. bei `<a>` die CSS Klasse `.btn-disabled` gesetzt werden.
+
+```html
+<p>
+    <button disabled>Button</button>
+    <button disabled class="btn-primary">Primary</button>
+    <button disabled class="btn-secondary">Secondary</button>
+    <button disabled class="btn-success">Success</button>
+    <button disabled class="btn-danger">Danger</button>
+    <button disabled class="btn-warning">Warning</button>
+    <button disabled class="btn-info">Info</button>
+    <button disabled class="btn-dark">Dark</button>
+    <button disabled class="btn-light">Light</button>
+    <button disabled class="btn-link">Link</button>
+</p>
+
+<p>
+    <button disabled class="btn-outline">Button</button>
+    <button disabled class="btn-outline btn-primary">Primary</button>
+    <button disabled class="btn-outline btn-secondary">Secondary</button>
+    <button disabled class="btn-outline btn-success">Success</button>
+    <button disabled class="btn-outline btn-danger">Danger</button>
+    <button disabled class="btn-outline btn-warning">Warning</button>
+    <button disabled class="btn-outline btn-info">Info</button>
+    <button disabled class="btn-outline btn-dark">Dark</button>
+    <button disabled class="btn-outline btn-light">Light</button>
+    <button disabled class="btn-outline btn-link">Link</button>
+</p>
+```
+
+Ergibt:
+
+![image](/uploads/a7558d45b709538e2b9e269bf5651de4/image.png)
+
+Button sizes
+=======
+
+Neben der Standardgröße wird auch kleinere und größere Version unterstützt. Es muss nur die Klasse `.btn-small` bzw. `.btn-large` zusätzlich gesetzt werden.
+
+```html
+<button class="btn-primary btn-small">Primary small</button>
+<button class="btn-primary">Primary</button>
+<button class="btn-primary btn-large">Primary large</button>
+
+<button class="btn-success btn-small">Success small</button>
+<button class="btn-success">Success</button>
+<button class="btn-success btn-large">Success large</button>
+```
+
+Ergibt:
+
+![image](/uploads/1455c4cb91276b37ff327fd7469b4745/image.png)