Phoenix Reisen Styleguide

300 #permalink Buttons

Diverse Arten von Buttons.

Source: src/components/_buttons.scss, line 1
Examples
Default styling
.btn--primary
"Primary"
.btn--secondary
"Secondary" (weniger prominent als Primary)
.btn--stretched
langgezogen
.btn--link
Linkstyle
.btn--success
Hinweis / Erfolg
.btn--info
Hinweis / Info
.btn--warning
Fehler / Warnung
.btn--danger
Fehler / Gefahr
Markup
<div class="pa2">
    <button type="button" class="btn [modifier class]">
        Button
    </button>
</div>
Source: src/components/_buttons.scss, line 11
Example
Markup
<article>
    <span style="display:inline-block; vertical-align: middle"> <!-- span kann weg -->
        <a href="#" class="nav-btn noprint" title="Navigation ein-/ausblenden">
            <i class="fas fa-bars"></i>
        </a>
    </span>
</article>
Source: src/components/_buttons.scss, line 224
Example
Markup
<article>
    <span style="display:inline-block; vertical-align: middle"> <!-- span kann weg -->
        <a href="#" class="avatar-cta" title="Buchungsdaten anzeigen">
            <i class="fas fa-user avatar__symbol"></i>
        </a>
    </span>
</article>
Source: src/components/_buttons.scss, line 263