Floating Buttons

The buttons are used everywhere on the website for different purposes and actions such as forms, CTAs and campaigns…

Below you will find the different definitions and options to create your buttons

Table of contents

Overview

Global Definition

Each button is based on a global CSS class called ".msds-btn-floating".

<div class="row">
  <div class="col-4">
    <h3>Default Floating Button</h3>
    <button type="button" class="msds-btn-floating">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
</div>

Sizes

Our floating buttons can be rendered in 3 different sizes, large, medium and small.

<div class="row">
  <div class="col-4">
    <h3>Large</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--lg">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Medium (default)</h3>
    <button type="button" class="msds-btn-floating">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Small</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--sm">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
</div>

States

Each button has different states that are applied automatically: hover, active, focus and disabled.

• You can see the different state by hovering, activating and focusing on the first Floating Button below
• The second Floating Button is disabled, all floating buttons can be disabled.

<div class="row">
  <div class="col-6">
    <h3>Hover, Active and Focus states</h3>
    <button type="button" class="msds-btn-floating">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-6">
    <h3>Disabled State</h3>
    <button type="button" class="msds-btn-floating" disabled>
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
</div>

Direction

There are three positional states that floating buttons can be preset to, these position can be applied to all floating buttons

• The icon on the left, and the text on the right by default
• The text on the left, and the icon on the right by using ".msds-btn-floating--right" modifier
• Column alignment with the text above the icon by using ".msds-btn-floating--column" modifier

<div class="row">

  <div class="col-4">
    <h3>Icon left, text right</h3>
    <button type="button" class="msds-btn-floating">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Text left, icon right</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--right">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Text above icon</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--column">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
</div>

Icon left - Text Right

<div class="row">
  <div class="col-4">
    <h3>Large</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--lg">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Medium (default)</h3>
    <button type="button" class="msds-btn-floating">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Small</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--sm">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
</div>

Text left - Icon Right

<div class="row">
  <div class="col-4">
    <h3>Large</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--lg msds-btn-floating--right">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Medium (default)</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--right">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Small</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--sm msds-btn-floating--right">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
</div>

Text above icon

<div class="row">
  <div class="col-4">
    <h3>Large</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--lg msds-btn-floating--column">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Medium (default)</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--column">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Small</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--sm msds-btn-floating--column">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
</div>

Floating Button

To use a primary floating button can be used by appending the following modifier CCS class: ".msds-btn-floating".

Below is a example of the Milestone Primary floating button.

<div class="row">
  <div class="col-4">
    <h3>Large</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--lg">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Medium (default)</h3>
    <button type="button" class="msds-btn-floating">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Small</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--sm">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
</div>

Secondary Floating Button

To use the Secondary Floating Button you need to add the following CCS class: ".msds-btn-floating--secondary".

Below are few examples of the Milestone Secondary button.

<div class="row">
  <div class="col-4">
    <h3>Large</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--lg msds-btn-floating--secondary">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Medium (default)</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--secondary">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Small</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--sm msds-btn-floating--secondary">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
</div>

Aligned Right

Aligned Column - Text above icon

Floating Button Dark Theme

To use the Dark Themed buttons you need to add the following CCS class: ".msds-btn-floating--dark".

Below are few examples of the Milestone Dark Themed Floating Button.

<div class="row">
  <div class="col-4">
    <h3>Large</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--lg msds-btn-floating--dark">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Medium (default)</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--dark">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Small</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--sm msds-btn-floating--dark">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
</div>

Aligned Right

Aligned Column - Text above icon

Secondary Floating Button Dark Theme

To use the Dark Themed buttons you need to add the following CCS class: ".msds-btn-floating--dark-secondary".

Below are few examples of the Milestone Dark Themed Floating Button.

<div class="row">
  <div class="col-4">
    <h3>Large</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--lg msds-btn-floating--dark-secondary">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Medium (default)</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--dark-secondary">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
  <div class="col-4">
    <h3>Small</h3>
    <button type="button" class="msds-btn-floating msds-btn-floating--sm msds-btn-floating--dark-secondary">
      <svg class="msds-icon">
        <use href="../../../msds-spritemap.svg#right-arrow" />
      </svg>
      See more
    </button>
  </div>
</div>

Aligned Right

Aligned Column - Text above icon