Buttons

Any of these button styles can be used in all of the following examples.

<a href="#" class="button">My button</a>

Green button

<a href="#" class="green-button">My button</a>

Green gradient button

<a href="#" class="green-gradient-button">My button</a>

Gold button

<a href="#" class="gold-button">My button</a>

Gold gradient button

<a href="#" class="gold-gradient-button">My button</a>

Increase button text size

Add class "text-lg" or "text-xl" to your button.

Large text button

<a href="#" class="button text-lg">My button</a>

XL text button

<a href="#" class="button text-xl">My button</a>

Give a button two lines

Notice the addition of the "button--two-line" class. You must contain each line within <em> </em> when using this style in the CMS.

Two line button

Subtext

<a href="#" class="button button--two-line w-full">
    <strong class="button__title">Two line button</strong>
    <em class="button__excerpt">Subtext</em>
</a>

Give a button two lines with an icon

Your icon must be an SVG or 50x50 pixels and must match the text color.

Two line button

Subtext

<a href="#" class="button button--two-line">
    <img src="/styleguide/image/50x50" alt="" class="button__image">
    <strong class="button__title">Two line button</strong>
    <em class="button__excerpt">Subtext</em>
</a>

Two or three buttons in a row

Do not mix colors or styles in this presentation.

Large text button Large text button

<div class="grid-three-col-layout my-4 gap-x-4 gap-y-2">
    <a href="#" class="button text-lg">Large text button</a>
    <a href="#" class="button text-lg">Large text button</a>
    <a href="#" class="button text-lg">Large text button</a>
</div>