# Buttons

## Brand Buttons

Button Text Button Text

    <!-- src/frontend/templates/elements/buttons/button-brand.twig -->

    <a href="01.02.buttons.html" class="button button-brand bg-color-event bg-color-event-darker-hover">

            <span>Button Text</span>

    </a>

    <!-- src/frontend/templates/elements/buttons/button-brand.twig -->

    <a href="01.02.buttons.html" class="button button-brand bg-color-event bg-color-event-darker-hover">

            <span class="icon icon-pencil"> </span>

            <span>Button Text</span>

    </a>

    <!-- src/frontend/templates/elements/buttons/button-brand.twig -->

    <a href="01.02.buttons.html" class="button button-brand bg-color-event bg-color-event-darker-hover">

            <span class="icon icon-pencil"> </span>

    </a>

## Outline Buttons

Button Text Button Text

    <!-- src/frontend/templates/elements/buttons/button-outline.twig -->

    <a href="01.02.buttons.html" class="button button-outline color-event bg-color-event-hover">

            <span>Button Text</span>

    </a>

    <!-- src/frontend/templates/elements/buttons/button-outline.twig -->

    <a href="01.02.buttons.html" class="button button-outline color-event bg-color-event-hover">

            <span class="icon icon-pencil"></span>

            <span>Button Text</span>

    </a>

    <!-- src/frontend/templates/elements/buttons/button-outline.twig -->

    <a href="01.02.buttons.html" class="button button-outline color-event bg-color-event-hover">

            <span class="icon icon-pencil"></span>

    </a>

## Logo Button

Frankfurter Buchmesse

    <!-- src/frontend/templates/elements/buttons/button-logo.twig -->
    <a href="01.02.buttons.html" class="button-logo">
        <span style="background-image: url(../resources/svg/logos/frankfurter-buchmesse.svg)">Frankfurter Buchmesse</span>
    </a>

## Stand Button

Halle
Stand
Messename
Jahr

    <!-- src/frontend/templates/elements/buttons/button-booth.twig -->
    <a href="01.02.buttons.html" class="button-booth color-event bg-color-event-hover border-color-event border-color-event-hover">
        <span class="hall">Halle</span><br />
        <span class="booth">Stand</span><br />
        <span class="fair">Messename<br />Jahr</span>
        <span class="color-event icon "></span>
    </a>

## Rollover Button

Button Text Erklärender Text auf Rollover

    <!-- src/frontend/elements/buttons/button-square.twig -->
    <a href="01.02.buttons.html" class="button-square border-color-event open-overlay overlay-gray">
        <span class="front-face">
            <span class="color-event icon icon-ticket-tilted"></span>
            <span class="text color-default">
                Button Text
            </span>
            <span class="color-event icon icon-arrow-next"></span>
        </span>
        <span class="back-face bg-color-event">
            <span class="text">
                Erklärender Text auf Rollover
            </span>
            <span class="icon icon-arrow-next"></span>
        </span>
    </a>