Google AMP Buttons Library

Google AMP Buttons

Buttons includes several predefined styles, each serving its own semantic purpose, with a few extras thrown in for more control.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>

Google AMP Buttons · Sizes

Fancy larger or smaller buttons? Add .btn-sm or .btn-lg for additional sizes.

<button class="btn btn-sm btn-primary">Primary</button>
<button class="btn btn-sm btn-secondary">Secondary</button>
<button class="btn btn-sm btn-success">Success</button>
<button class="btn btn-sm btn-danger">Danger</button>
<button class="btn btn-sm btn-warning">Warning</button>
<button class="btn btn-sm btn-info">Info</button>
<button class="btn btn-sm btn-light">Light</button>
<button class="btn btn-sm btn-dark">Dark</button>

<button class="btn btn-lg btn-primary">Primary</button>
<button class="btn btn-lg btn-secondary">Secondary</button>
<button class="btn btn-lg btn-success">Success</button>
<button class="btn btn-lg btn-danger">Danger</button>
<button class="btn btn-lg btn-warning">Warning</button>
<button class="btn btn-lg btn-info">Info</button>
<button class="btn btn-lg btn-light">Light</button>
<button class="btn btn-lg btn-dark">Dark</button>

Google AMP Buttons · Outline

Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-light">Light</button>
<button class="btn btn-outline-dark">Dark</button>

Google AMP Buttons · Block level

Create block level buttons those that span the full width of a parent by adding .btn-block.

This works also with .btn-sm or .btn-lg and .btn-outline-*.

<button class="btn btn-sm btn-block btn-primary">Primary</button>
<button class="btn btn-block btn-secondary">Secondary</button>
<button class="btn btn-block btn-success">Success</button>
<button class="btn btn-block btn-danger">Danger</button>
<button class="btn btn-block btn-warning">Warning</button>
<button class="btn btn-block btn-info">Info</button>
<button class="btn btn-block btn-light">Light</button>
<button class="btn btn-block btn-dark">Dark</button>

Google AMP Buttons · Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to <button> as they use a pseudo-class.

This works also with .btn-sm or .btn-lg and .btn-outline-*.

<a href="#" title="..." class="btn btn-primary active">...</a>

Google AMP Buttons · Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

This works also with .btn-sm or .btn-lg and .btn-outline-*.

<button class="btn btn-primary" disabled>Disabled button</button>
<a href="#" title="..." class="btn btn-primary disabled">Disabled link</a>

Google AMP Buttons · Groups

Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn in .btn-group.

<div class="btn-group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Right</button>
</div>

Google AMP Buttons · Toolbar

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

<div class="btn-toolbar">
  <div class="btn-group mr-2" role="group">
    <button class="btn btn-primary">1</button>
    <button class="btn btn-primary">2</button>
    <button class="btn btn-primary">3</button>
    <button class="btn btn-primary">4</button>
  </div>
  <div class="btn-group mr-2">
    <button class="btn btn-primary">5</button>
    <button class="btn btn-primary">6</button>
    <button class="btn btn-primary">7</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-primary">8</button>
    <button class="btn btn-primary">9</button>
  </div>
</div>

Google AMP Buttons · Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally.

<div class="btn-group-vertical">
  <button class="btn btn-primary">Top</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Bottom</button>
</div>