Buttons

Buttons Colors

Diese Template nutzt die .btn class für die Standart Buttons. Die Farbe kann mit den untenstehenden Code angepasst werden.

Solid Buttons

.btn-primary .btn-secondary .btn-success .btn-info .btn-warning .btn-danger .btn-light .btn-dark

<a class="btn btn-primary" href="#!" role="button">.btn-primary</a>
<a class="btn btn-secondary" href="#! role="button"">.btn-secondary</a>
<a class="btn btn-success" href="#!" role="button">.btn-success</a>
<a class="btn btn-info" href="#!" role="button">.btn-info</a>
<a class="btn btn-warning" href="#!" role="button">.btn-warning</a>
<a class="btn btn-danger" href="#!" role="button">.btn-danger</a>
<a class="btn btn-light" href="#!" role="button">.btn-light</a>
<a class="btn btn-dark" href="#!" role="button">.btn-dark</a>

Outline Buttons

.btn-primary .btn-secondary .btn-success .btn-info .btn-warning .btn-danger .btn-light .btn-dark

<a class="btn btn-outline-primary" href="#!" role="button">.btn-primary</a>
<a class="btn btn-outline-secondary" href="#! role="button"">.btn-secondary</a>
<a class="btn btn-outline-success" href="#!" role="button">.btn-success</a>
<a class="btn btn-outline-info" href="#!" role="button">.btn-info</a>
<a class="btn btn-outline-warning" href="#!" role="button">.btn-warning</a>
<a class="btn btn-outline-danger" href="#!" role="button">.btn-danger</a>
<a class="btn btn-outline-light" href="#!" role="button">.btn-light</a>
<a class="btn btn-outline-dark" href="#!" role="button">.btn-dark</a>

Buttons Größe

Die Größe der Buttons kann mit .btn-sm und .btn-lg angepasst werden

.btn-sm .btn .btn-lg

<a class="btn btn-sm btn-outline-primary" href="#!" role="button">.btn-sm</a>
<a class="btn btn-outline-primary" href="#!" role="button">.btn</a>
<a class="btn btn-lg btn-outline-primary" href="#!" role="button">.btn-lg</a>

Buttons Formen

Die Form der Button kann mit .btn und .rounded-pill angepasst werden

.btn .rounded-pill

<a class="btn btn-primary" href="#!" role="button">.btn</a>
<a class="btn btn-primary rounded-pill" href="#!" role="button">.rounded-pill</a>

Buttons mit Icon

Nutze die class .btn-icon-left oder .btn-icon-right um die Position der Icons zu bestimmen.

Für outline button, nutze .btn-outline-* . Um einen kapselartigen Button zu erstellen, kannst du die Klasse.btn-capsuleverwenden.

.btn-icon .btn-icon .btn-icon .btn-icon

.btn-icon .btn-icon .btn-icon .btn-icon

<a class="btn btn-primary" href="#!" role="button"><span class="fa-brands fa-gitlab"></span> .btn-icon</a> 
<a class="btn btn-primary" href="#!" role="button">.btn-icon <span class="fa-brands fa-gitlab"></span></a>
<a class="btn btn-outline-primary" href="#!" role="button"><span class="fa-brands fa-gitlab"></span> .btn-icon</a>
<a class="btn btn-outline-primary" href="#!" role="button">.btn-icon <span class="fa-brands fa-gitlab"></span></a>

<a class="btn btn-primary rounded-pill" href="#!" role="button"><span class="fa-brands fa-gitlab"></span> .btn-icon</a>
<a class="btn btn-primary rounded-pill" href="#!" role="button">.btn-icon <span class="fa-brands fa-gitlab"></span></a>
<a class="btn btn-outline-primary rounded-pill" href="#!" role="button"><span class="fa-brands fa-gitlab"></span> .btn-icon</a>
<a class="btn btn-outline-primary rounded-pill" href="#!" role="button">.btn-icon <span class="fa-brands fa-gitlab"></span></a>

Buttons Group

Basic:

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Mixed styles:

<div class="btn-group" role="group" aria-label="Basic mixed styles example">
  <button type="button" class="btn btn-danger">Left</button>
  <button type="button" class="btn btn-warning">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

Outlined styles:

<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>