FTSE Russell Styleguide

Buttons 

<!-- Default -->
<div class="eight ig-columns offset-by-one">
    <p>We use button shapes to distinguish a variety of calls to actions and we’ve designed these shapes to be easily recognisable and visually appealing.</p>

    <div class="four ig-columns ig-row--margin">
        <h4>Active Button</h4>
    </div>
    <!-- ig-column -->
    <div class="five ig-columns ig-row--margin ">
        <a href="#" class="btn btn--active">
  
  <span>Active Button</span>
</a>
    </div>


<!-- Download -->
<div class="four ig-columns ig-row--margin">
    <h4>Download button</h4>
</div>
<!-- ig-column -->
<div class="five ig-columns ig-row--margin ">
    <a href="#" class="btn btn--download">
  
  <span>Download button</span>
</a>
</div>


<!-- Player -->
<div class="four ig-columns ig-row--margin">
    <h4>Play Now</h4>
</div>
<!-- ig-column -->
<div class="five ig-columns ig-row--margin  ig-inverted ">
    <a href="#" class="btn btn--player">
  
  <span>Play Now</span>
</a>
</div>

</div>
<!-- ig-columns -->


{% if first %}
  <div class="eight ig-columns offset-by-one">
    <p>We use button shapes to distinguish a variety of calls to actions and we’ve designed these shapes to be easily recognisable and visually appealing.</p>
{% endif %}

{% if guide %}
  <div class="four ig-columns ig-row--margin">
    <h4>{{ label }}</h4>
  </div>
  <!-- ig-column -->
  <div class="five ig-columns ig-row--margin {% if inverted %} ig-inverted {% endif %}">
{% endif %}

{%- if href -%}
<a href="{{ href }}" class="btn btn--{{ mods }}">
  {% if icon %}
  <svg class="icon">
    <use xlink:href="/assets/sprites/icons.svg#{{ icon }}"></use>
  </svg>
  {% endif %}
  <span>{{ label }}</span>
</a>
{%- else -%}
<button class="btn btn--{{ mods }}">{{ label }}</button>
{%- endif -%}

{% if guide %}
  </div>
{% endif %}

{% if last %}
  </div><!-- ig-columns -->
{% endif %}
 
/* Default */
{
  "content": {
    "title": "this is the title"
  },
  "href": "#",
  "first": true,
  "guide": true,
  "label": "Active Button",
  "mods": "active"
}


/* Download */
{
  "content": {
    "title": "this is the title"
  },
  "href": "#",
  "guide": true,
  "label": "Download button",
  "mods": "download"
}


/* Player */
{
  "content": {
    "title": "this is the title"
  },
  "href": "#",
  "inverted": true,
  "guide": true,
  "label": "Play Now",
  "mods": "player",
  "last": true
}
  • Content: 
    .btn {
  &:hover {
    background-color: $primary-dark;
    transition: $transition-base;
  }

  &:active {
    background-color: $primary;
    color: white;
  }

  &--disabled {
    background: $primary-lighter;
  }

  &--submit {
    text-transform: uppercase;
  }

  &--inverted {
    background-color: $primary-light;
    letter-spacing: 5px;
  }

  &--alternative {
    background-color: $secondary;
  }

  &--small {
    font-size: $font-size-xs;
    letter-spacing: 5px;
  }

  &--player {
    background: transparent;
    box-shadow: none;
    color: $white;
    cursor: pointer;
    letter-spacing: .1em;
    line-height: 2;
    padding: 0 0 0 2.5rem;
    position: relative;
    outline: none;

    &:hover {
      background-color: transparent;
      box-shadow: none;
      transition: $transition-base;
    }

    &:before {
      background-color: $white;
      border-radius: 50%;
      content: '';
      height: $space-xl;
      left: 0;
      letter-spacing: 0;
      opacity: .5;
      position: absolute;
      width: $space-xl;
    }
  }

  &--transparent {
    background-color: transparent;
    border: $border-width-thick solid $white;
    color: $white;
    font-size: $font-size-sm;
    font-weight: $font-weight-light;
    text-transform: uppercase;
    transition: $transition-base;

    &:hover {
      background-color: $white;
      color: $gray-darker;
      transition: $transition-base;
    }
  }
}

span.btn--transparent {
  padding: $space-xs $space-lg;
}
  • URL: /components/raw/buttons/_buttons.scss
  • Filesystem Path: src/components/atoms/buttons/_buttons.scss
  • Size: 1.5 KB

There are no notes for this item.