in available credit

Go Back
skip navigation

CTA Styles

Basic Structure

CTA structure needs to be as shown. This is to ensure the CTA will expand with the text within. In order to accomplish this, we make use of minmax() which requires display: grid on the div.btn element. We need the CTA text inside of the span to not scale the font-size when the CTA is pressed.

<div class="btn btn--primary">
  <a href="https://www.brooklinen.com">
    <span>CTA Text</span>
  </a>
</div>

Defaults

Minimum classes on the div.btn

<div class="btn btn--primary"></div>
<div class="btn btn--secondary"></div>
<div class="btn btn--secondary--small"></div>

The default is that the cta will be left aligned and the fixed width dictated by the verison of CTA (primary, secondary, tertiary).

Helper Classes

You can allow the CTA to extend the full width of the grid__item it is inside of by adding btn-breakpoint--spans-grid-item and can be rest to the default with btn-breakpoint--fixed-large for primary and secondary buttons and btn-breakpoint--fixed-small for the tertiary (secondary-small).

You can allow the CTA to align differently through breakpoints with btn-breakpoint--right
btn-breakpoint--left
btn-breakpoint--center.

Primary Button

Click this to go to the home page

Secondary Button

Click this to go to the home page

Secondary Small Button Tertiary

Click this to go to the home page


CTA options

Primary Button

default

btn
btn--primary

Left

btn
btn--primary
btn-sml--left
btn-med--left
btn-xlg--left

Centered

btn
btn--primary
btn-sml--center
btn-med--center
btn-xlg--center

Right

btn
btn--primary
btn-sml--right
btn-med--right
btn-xlg--right

spans grid item

btn
btn--primary
btn-sml--spans-grid-item
btn-med--spans-grid-item
btn-xlg--spans-grid-item

Secondary Button

default

btn
btn--secondary

Left

btn
btn--secondary
btn-sml--left
btn-med--left
btn-xlg--left

Centered

btn
btn--secondary
btn-sml--center
btn-med--center
btn-xlg--center

Right

btn
btn--secondary
btn-sml--rightt
btn-med--right
btn-xlg--right

spans grid item

btn
btn--secondary
btn-sml--spans-grid-item
btn-med--spans-grid-item
btn-xlg--spans-grid-item

Secondary Small Button Tertiary

default

btn
btn--secondary--small

Left

btn
btn--secondary--small
btn-sml--left
btn-med--left
btn-xlg--left

Centered

btn
btn--secondary--small
btn-sml--center
btn-med--center
btn-xlg--center

Right

btn
btn--secondary--small
btn-sml--right
btn-med--right
btn-xlg--right

spans grid item

btn
btn--secondary--small
btn-sml--spans-grid-item
btn-med--spans-grid-item
btn-xlg--spans-grid-item

Text CTA's

Basic Structure

The text CTA styles can techinically be applied to any text element, but they should only be applied to inline elements, as the underline will span the entire element that it has been applied to. Applying to inline elements ensures the underline will not extend beyond its intended space.

As such, the only truly mandatory part of the example to the right is the class hover-active--underline. However, in most cases, the CTA will be wrapped inside of another element, so it is therefore shown to the right in a more applicable setting.

<a href="https://www.brooklinen.com" class="hover-active--underline">
  CTA Text
</a>

Text CTA Examples

Single Inline Tag

<a href="#" class="p_2 hover-active--underline">
  Shop Classic
</a>
Shop Classic

Wrapped Inline Tag

<p class="p_2">
  For more info, see our
  <span class="hover-active--underline">
    size guide
  </span>.
</p>

For more info, see our size guide.


Wrapped in a Header

<h1 class="h_1 header-cta">
  <span class="hover-active--underline">
    Loungewear
  </span>
</h1>

Loungewear


Persisted State

In addition to the default hover, the animation can also be triggered and made persistent, by toggling the active class. Too see this in action, click the "Change State" CTA below to toggle the state.

<h1 class="h_1 header-cta">
  <span class="hover-active--underline sheets">
    Sheets
  </span>
</h1>

<div class="btn btn--secondary change-state"><a><span>Change state</span></a></div>

<script>
  $('.btn.change-state').on('click', function(){
    $('.hover-active--underline.sheets').toggleClass('active');
  });
</script>

Sheets




Your Cart

Get it before it's gone!

Items in your cart are moving fast! Get them before somebody else does.