GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen
GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen
Styleguide

Buttons

Allgemein

Das Button-Design ist für die Elemente <button> und <input> voreingestellt.  Beachte die entsprechenden Typ- und Rollenbezeichnungen. Das Button Design kann jedoch auch für <a>-Elemente verwendet werden.

Es ist wichtig, dass bei der Verwendung von Button-Klassen auf <a>-Elementen, die nicht direkt einen klassischen Link auf eine neue Seite mit neuem Inhalt darstellen, diese zusätzlich mit dem Attribut role="button" versehen werden. Für eine klare Kommunikation im Hinblick auf Barrierefreiheit wird deutlich, dass der Link als Interaktionselement verwendet wird. Das Erscheinungsbild wird dadurch nicht beeinflusst. Erst mit den hier gezeigten Beispielen und Klassen für <button>, <input> oder <a> wird das Aussehen definiert werden.

Base Button

HTML-Syntax Beispiel 



              <!-- Base Button !-->

              <!-- large!-->
              <button type="button" class="btn-lg">Large Button</button>
              <button type="button" class="btn-lg active">Large aktiv</button>
              <button type="button" class="btn-lg disabled">Large deaktiviert</button>

              <!-- default!-->
              <button type="button" >Default Standard</button>
              <button type="button" class="active">Standard aktiv</button>
              <button type="button" class="disabled">Standard deaktiviert</button>

              <!-- small !-->
              <button type="button" class="btn-sm">Small Button</button>
              <button type="button" class="btn-sm active">Small aktiv</button>
              <button type="button" class="btn-sm disabled">Small deaktiviert</button>

Base Button Preview-Beispiel:

Base large:

Base default:

Base small:

Primary Button

HTML-Syntax Beispiel 



              <!-- Primary Button !-->

              <!-- large!-->
              <button type="button" class="gesis-button--default btn-lg">Large Button</button>
              <button type="button" class="gesis-button--default btn-lg active">Large aktiv</button>
              <button type="button" class="gesis-button--default btn-lg disabled">Large deaktiviert</button>

              <!-- default!-->
              <button type="button" class="gesis-button--default">Default Standard</button>
              <button type="button" class="gesis-button--default active">Standard aktiv</button>
              <button type="button" class="gesis-button--default disabled">Standard deaktiviert</button>

              <!-- small !-->
              <button type="button" class="gesis-button--default btn-sm">Small Button</button>
              <button type="button" class="gesis-button--default btn-sm active">Small aktiv</button>
              <button type="button" class="gesis-button--default btn-sm disabled">Small deaktiviert</button>

Primary Button Preview-Beispiel:

Primary large:

Primary default:

Primary small:

CTA Button

HTML-Syntax Beispiel 



              <!-- CTA Button !-->

              <!-- large!-->
              <button type="button" class="gesis-button--cta btn-lg">Large Button</button>
              <button type="button" class="gesis-button--cta btn-lg active">Large aktiv</button>
              <button type="button" class="gesis-button--cta btn-lg disabled">Large deaktiviert</button>

              <!-- default!-->
              <button type="button" class="gesis-button--cta">Default Standard</button>
              <button type="button" class="gesis-button--cta active">Standard aktiv</button>
              <button type="button" class="gesis-button--cta disabled">Standard deaktiviert</button>

              <!-- small !-->
              <button type="button" class="gesis-button--cta btn-sm">Small Button</button>
              <button type="button" class="gesis-button--cta btn-sm active">Small aktiv</button>
              <button type="button" class="gesis-button--cta btn-sm disabled">Small deaktiviert</button>

CTA Button Preview-Beispiel:

CTA large:

CTA default:

CTA small:

<a>-Elemente

Live-Beispiel

HTML-Quelltext

<a href="/home" class="gesis-button--default"> Mehr erfahren </a>

Live-Beispiel

HTML-Quelltext

<a href="/home" class="gesis-button--cta --gs--color--gs-lightblue"> <i class="gesis-icon-box-arrow-in"></i> Datenzugang </a>
</a>

Live-Beispiel

HTML-Quelltext

<a href="/home" class="gesis-button--cta --gs--color--gs-lightblue"> test </a> 
</a>