Buttons

Primary Buttons

Our .button class is used for primary links and page actions. It can be applied to either a or button tags. All additional button classes are additive.

Link
<a class="button" href="">Link</a>
<button class="button">Button</button>

Secondary Buttons

The .button--secondary modifier class is great for secondary links and page actions.

Link
<a class="button button--secondary" href="">Link</a>
<button class="button button--secondary">Button</button>

Transparent Buttons

The .button--transparent modifier class can be used for tertiary links and page actions. It's useful for vertically aligning actions with other button types.

Transparent
<button class="button">Primary</button>
<a class="button button--transparent" href="">Transparent</a>

Negative Buttons

We use our .button--negative modifier class for buttons that represent destructive or negative links and page actions.

Link Link
<a class="button button--negative" href="">Link</a>
<button class="button button--negative">Button</button>
<a class="button button--negative button--secondary" href="">Link</a>
<button class="button button--negative button--secondary">Button</button>

White Buttons

The .button--white modifier makes buttons visible on dark backgrounds.

Link Link
<a class="button button--white" href="">Link</a>
<button class="button button--white">Button</button>
<a class="button button--white button--secondary" href="">Link</a>
<button class="button button--white button--secondary">Button</button>

Disabled Buttons

.button--disabled is great for inactive links and page actions.

<button class="button button--disabled">Button</button>
<button class="button button--secondary button--disabled">Button</button>
<button class="button button--negative button--disabled">Button</button>
<button class="button button--negative button--secondary button--disabled">Button</button>
<button class="button button--white button--disabled">Button</button>
<button class="button button--white button--secondary button--disabled">Button</button>

Buttons with Icons

Combine any of our button colors and styles with .button--icon, then add an inline SVG inside the button for a button with icon.

<button class="button button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">...</svg>
  Button
</button>

<button class="button button--secondary button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">...</svg>
  Button
</button>

<button class="button button--negative button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">...</svg>
  Button
</button>

<button class="button button--negative button--secondary button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">...</svg>
  Button
</button>

<button class="button button--white button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">...</svg>
  Button
</button>

<button class="button button--white button--secondary button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">...</svg>
  Button
</button>

Social Buttons

Use .button--[socialnetworkname] to assign the network's brand color to our buttons, and use the .button--icon along with the appropriate svg to insert the network's logo. Alternatively, you can also use Solid's social link colors to create a link related to a social network.

<button class="button button--facebook button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
    <title>Facebook</title>
    <path d="M36.5 0h-35C.3 0 0 .3 0 1.5v34.9C0 37.7.3 38 1.5 38h18.9V23.4h-5.8v-5.8h5.8v-4.4c0-5.1 2.8-7.8 7.4-7.8 2.2 0 4.3.2 4.3.2v4.7h-2.8c-2.5 0-3.1 1.8-3.1 3.5v3.8h6l-.8 5.8h-5.3V38h10.2c1.2 0 1.5-.3 1.5-1.5v-35C38 .3 37.7 0 36.5 0z"/>
  </svg>
   Follow
</button>

<button class="button button--twitter button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
    <title>Twitter</title>
    <path d="M37.9 8c-1.4.6-2.9 1-4.4 1.2 1.6-1 2.8-2.5 3.4-4.3-1.5.9-3.1 1.5-4.9 1.9-1.4-1.5-3.4-2.4-5.6-2.4-4.3 0-7.7 3.5-7.7 7.7 0 .6.1 1.2.2 1.8-6.4-.3-12.1-3.4-15.9-8.1-.7 1.1-1 2.5-1 3.9 0 2.7 1.2 5 3.2 6.4-1.3 0-2.3-.4-3.7-1v.1c0 3.7 2.9 6.9 6.4 7.6-.9.2-1.4.3-2.1.3-.5 0-.9 0-1.4-.1 1 3.1 3.9 5.3 7.2 5.4-2.6 2.1-6 3.3-9.6 3.3-.6 0-1.2 0-1.8-.1C3.6 33.7 7.7 35 12 35c14.2 0 22-11.8 22-22v-1c1.5-1.1 2.8-2.5 3.9-4"/>
  </svg>
   Follow
</button>

<button class="button button--google button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
    <title>Google plus</title>
    <path d="M23.5 17.3c.1.6.2 1.2.2 2 0 6.8-4.6 11.6-11.6 11.6C5.4 30.9 0 25.6 0 19 0 12.4 5.4 7.1 12.1 7.1c3.3 0 6 1.2 8.1 3.1l-3.3 3.1c-.9-.8-2.5-1.8-4.8-1.8-4.1 0-7.5 3.4-7.5 7.5s3.4 7.5 7.5 7.5c4.8 0 6.6-3.4 6.9-5.1h-6.9v-4.1h11.4zm11 0v-3.4H31v3.4h-3.5v3.4H31v3.4h3.5v-3.4H38v-3.4h-3.5z"/>
    </svg>
    Follow
</button>

<button class="button button--linkedin button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
    <title>LinkedIn</title>
    <path d="M8 36.2H1.1V13H8v23.2zM4.4 10.3C1.7 10.3 0 8.3 0 6s1.8-4.2 4.5-4.2S8.9 3.7 8.9 6c0 2.3-1.7 4.3-4.5 4.3zM38 36.2h-8.2v-12c0-3.2-1.5-5.4-4.4-5.4-2.2 0-3.2 1.5-3.8 2.9-.2.5 0 1.2 0 1.9v12.6h-8.8s.1-21.8 0-23.2h8.8v3.5c0-1.6 3-3.9 7.2-3.9C34 12.6 38 16 38 23.3v12.9z"/>
  </svg>
    </svg>
    Follow
</button>

<button class="button button--pinterest button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
    <title>Pinterest</title>
    <path d="M19 0C8.5 0 0 8.5 0 19c0 7.8 4.7 14.5 11.4 17.4-.1-1.3 0-2.9.3-4.4.4-1.5 2.4-10.4 2.4-10.4s-.6-1.2-.6-3c0-2.8 1.6-4.9 3.7-4.9 1.7 0 2.6 1.3 2.6 2.9 0 1.7-1.1 4.3-1.7 6.7-.5 2 1 3.7 3 3.7 3.6 0 6-4.6 6-10.1 0-4.2-2.8-7.3-7.9-7.3-5.8 0-9.4 4.3-9.4 9.1 0 1.7.5 2.8 1.3 3.7.4.4.4.6.3 1.1-.1.3-.3 1.2-.4 1.5-.1.5-.5.7-1 .5-2.7-1.1-3.9-4-3.9-7.3 0-5.4 4.6-11.9 13.6-11.9 7.3 0 12 5.3 12 10.9 0 7.5-4.1 13-10.3 13-2 0-4-1.1-4.6-2.4L15.5 33c-.4 1.5-1.2 2.9-1.9 4.1 1.7.5 3.5.8 5.4.8 10.5 0 19-8.5 19-19C38 8.5 29.5 0 19 0"/>
  </svg>
    Follow
</button>

<button class="button button--tumblr button--icon" href="">
  <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    <path d="M205.125 12c-3.177 25.099-8.896 45.75-17.156 62.271-8.26 16.203-19.063 30.182-32.724 41.937-13.661 11.438-30.182 20.333-49.245 26.688v68.943h54.01v171.245c0 22.24 2.224 39.396 6.99 51.151 4.448 11.755 13.026 22.875 25.099 33.359 12.073 10.167 26.688 18.427 43.844 23.828 17.156 5.719 36.854 8.578 59.094 8.578 19.698 0 38.125-1.906 54.964-6.036 16.839-3.813 35.583-10.802 56.552-20.651v-76.885c-24.464 16.203-48.927 24.146-73.708 24.146-13.979 0-26.37-3.177-37.172-9.849-7.943-4.766-13.661-11.12-16.521-19.063-3.177-8.26-4.448-26.37-4.448-54.646v-125.177h115.646v-76.568h-115.646v-123.271h-69.578z"/>
  </svg>
  Follow
</button>

<button class="button button--youtube button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
    <title>Youtube</title>
    <path d="M26.2 19l-12.6 7.4V11.6L26.2 19zM38 25.8V12.1s.2-6.7-6.4-6.7H6.4S0 5.5 0 12.1v13.8s-.2 6.7 6.4 6.7h25.2s6.4-.1 6.4-6.8"/>
  </svg>
  Follow
</button>

<button class="button button--instagram button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
    <title>Instagram</title>
    <path d="M31.1 0H7C2.8 0 0 2.8 0 7v24c0 4.2 2.8 7 7 7h24.1c4.2 0 6.9-2.8 6.9-7V7c0-4.2-2.8-7-6.9-7zM33 3.9h.6v6.7h-6.4V3.9H33zM13.4 15c1.3-1.7 3.3-2.9 5.6-2.9s4.3 1.1 5.6 2.9c.8 1.1 1.3 2.5 1.3 4 0 3.8-3.1 6.9-6.9 6.9s-6.9-3.1-6.9-6.9c0-1.5.5-2.9 1.3-4zm21.7 16c0 2.1-1.9 4-4 4H7c-2.1 0-4-2-4-4V14.6h6.1c-.5 1.5-.8 2.8-.8 4.2 0 5.9 4.8 10.8 10.7 10.8 5.9 0 10.7-5 10.7-10.9 0-1.4-.3-2.7-.8-4.2H35V31z"/>
  </svg>
  Follow
</button>

<button class="button button--sms button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
    <title>SMS</title>
    <path d="M13 36c-.3 0-.6-.1-.8-.2-.8-.3-1.2-1-1.2-1.8v-5.8c-5-.3-9-4.9-9-10.4v-6.3C2 5.7 5.8 2 11.6 2h14.7c5.9 0 9.6 3.7 9.6 9.4v6.3c0 5.8-3.8 10.3-9.6 10.3h-3l-9 7.4c-.3.3-.8.6-1.3.6z"/>
  </svg>
  SMS
</button>

<button class="button button--rss button--sms button--icon xs-mr1 xs-mb1" href="">
  RSS
</button>

<button class="button button--apple-news button--icon xs-mr1 xs-mb1" href="">
  Apple News
</button>

Small Buttons

Use the .button--small class for smaller versions of all Solid's button types.

<button class="button button--small">Button</button>
<button class="button button--secondary button--small">Button</button>
<button class="button button--negative button--small">Button</button>
<button class="button button--negative button--secondary button--small">Button</button>
<button class="button button--white button--small">Button</button>
<button class="button button--white button--secondary button--small">Button</button>

Small Buttons with Icons

Combine .button--small with .button--icon to get a smaller version of Solid's icon buttons.

<button class="button button--small button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">...</svg>
  Button
</button>

<button class="button button--secondary button--small button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">...</svg>
  Button
</button>

<button class="button button--negative button--small button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">...</svg>
  Button
</button>

<button class="button button--negative button--secondary button--small button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">...</svg>
  Button
</button>

<button class="button button--white button--small button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">...</svg>
  Button
</button>

<button class="button button--white button--secondary button--small button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">...</svg>
  Button
</button>

Small Social Buttons

Combine .button--small with .button--[socialnetworkname] to get a smaller version of Solid's social buttons.

<button class="button button--facebook button--small button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
    <title>Facebook</title>
    <path d="M36.5 0h-35C.3 0 0 .3 0 1.5v34.9C0 37.7.3 38 1.5 38h18.9V23.4h-5.8v-5.8h5.8v-4.4c0-5.1 2.8-7.8 7.4-7.8 2.2 0 4.3.2 4.3.2v4.7h-2.8c-2.5 0-3.1 1.8-3.1 3.5v3.8h6l-.8 5.8h-5.3V38h10.2c1.2 0 1.5-.3 1.5-1.5v-35C38 .3 37.7 0 36.5 0z"/>
  </svg>
   Follow
</button>

<button class="button button--twitter button--small button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
    <title>Twitter</title>
    <path d="M37.9 8c-1.4.6-2.9 1-4.4 1.2 1.6-1 2.8-2.5 3.4-4.3-1.5.9-3.1 1.5-4.9 1.9-1.4-1.5-3.4-2.4-5.6-2.4-4.3 0-7.7 3.5-7.7 7.7 0 .6.1 1.2.2 1.8-6.4-.3-12.1-3.4-15.9-8.1-.7 1.1-1 2.5-1 3.9 0 2.7 1.2 5 3.2 6.4-1.3 0-2.3-.4-3.7-1v.1c0 3.7 2.9 6.9 6.4 7.6-.9.2-1.4.3-2.1.3-.5 0-.9 0-1.4-.1 1 3.1 3.9 5.3 7.2 5.4-2.6 2.1-6 3.3-9.6 3.3-.6 0-1.2 0-1.8-.1C3.6 33.7 7.7 35 12 35c14.2 0 22-11.8 22-22v-1c1.5-1.1 2.8-2.5 3.9-4"/>
  </svg>
   Follow
</button>

<button class="button button--google button--small button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
    <title>Google plus</title>
    <path d="M23.5 17.3c.1.6.2 1.2.2 2 0 6.8-4.6 11.6-11.6 11.6C5.4 30.9 0 25.6 0 19 0 12.4 5.4 7.1 12.1 7.1c3.3 0 6 1.2 8.1 3.1l-3.3 3.1c-.9-.8-2.5-1.8-4.8-1.8-4.1 0-7.5 3.4-7.5 7.5s3.4 7.5 7.5 7.5c4.8 0 6.6-3.4 6.9-5.1h-6.9v-4.1h11.4zm11 0v-3.4H31v3.4h-3.5v3.4H31v3.4h3.5v-3.4H38v-3.4h-3.5z"/>
  </svg>
    Follow
</button>

<button class="button button--linkedin button--small button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
    <title>LinkedIn</title>
    <path d="M8 36.2H1.1V13H8v23.2zM4.4 10.3C1.7 10.3 0 8.3 0 6s1.8-4.2 4.5-4.2S8.9 3.7 8.9 6c0 2.3-1.7 4.3-4.5 4.3zM38 36.2h-8.2v-12c0-3.2-1.5-5.4-4.4-5.4-2.2 0-3.2 1.5-3.8 2.9-.2.5 0 1.2 0 1.9v12.6h-8.8s.1-21.8 0-23.2h8.8v3.5c0-1.6 3-3.9 7.2-3.9C34 12.6 38 16 38 23.3v12.9z"/>
  </svg>
    Follow
</button>

<button class="button button--pinterest button--small button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
    <title>Pinterest</title>
    <path d="M19 0C8.5 0 0 8.5 0 19c0 7.8 4.7 14.5 11.4 17.4-.1-1.3 0-2.9.3-4.4.4-1.5 2.4-10.4 2.4-10.4s-.6-1.2-.6-3c0-2.8 1.6-4.9 3.7-4.9 1.7 0 2.6 1.3 2.6 2.9 0 1.7-1.1 4.3-1.7 6.7-.5 2 1 3.7 3 3.7 3.6 0 6-4.6 6-10.1 0-4.2-2.8-7.3-7.9-7.3-5.8 0-9.4 4.3-9.4 9.1 0 1.7.5 2.8 1.3 3.7.4.4.4.6.3 1.1-.1.3-.3 1.2-.4 1.5-.1.5-.5.7-1 .5-2.7-1.1-3.9-4-3.9-7.3 0-5.4 4.6-11.9 13.6-11.9 7.3 0 12 5.3 12 10.9 0 7.5-4.1 13-10.3 13-2 0-4-1.1-4.6-2.4L15.5 33c-.4 1.5-1.2 2.9-1.9 4.1 1.7.5 3.5.8 5.4.8 10.5 0 19-8.5 19-19C38 8.5 29.5 0 19 0"/>
  </svg>
    Follow
</button>

<button class="button button--tumblr button--small button--icon" href="">
  <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    <path d="M205.125 12c-3.177 25.099-8.896 45.75-17.156 62.271-8.26 16.203-19.063 30.182-32.724 41.937-13.661 11.438-30.182 20.333-49.245 26.688v68.943h54.01v171.245c0 22.24 2.224 39.396 6.99 51.151 4.448 11.755 13.026 22.875 25.099 33.359 12.073 10.167 26.688 18.427 43.844 23.828 17.156 5.719 36.854 8.578 59.094 8.578 19.698 0 38.125-1.906 54.964-6.036 16.839-3.813 35.583-10.802 56.552-20.651v-76.885c-24.464 16.203-48.927 24.146-73.708 24.146-13.979 0-26.37-3.177-37.172-9.849-7.943-4.766-13.661-11.12-16.521-19.063-3.177-8.26-4.448-26.37-4.448-54.646v-125.177h115.646v-76.568h-115.646v-123.271h-69.578z"/>
  </svg>
  Follow
</button>

<button class="button button--youtube button--small button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
    <title>Youtube</title>
    <path d="M26.2 19l-12.6 7.4V11.6L26.2 19zM38 25.8V12.1s.2-6.7-6.4-6.7H6.4S0 5.5 0 12.1v13.8s-.2 6.7 6.4 6.7h25.2s6.4-.1 6.4-6.8"/>
  </svg>
  Follow
</button>

<button class="button button--instagram button--small button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
    <title>Instagram</title>
    <path d="M31.1 0H7C2.8 0 0 2.8 0 7v24c0 4.2 2.8 7 7 7h24.1c4.2 0 6.9-2.8 6.9-7V7c0-4.2-2.8-7-6.9-7zM33 3.9h.6v6.7h-6.4V3.9H33zM13.4 15c1.3-1.7 3.3-2.9 5.6-2.9s4.3 1.1 5.6 2.9c.8 1.1 1.3 2.5 1.3 4 0 3.8-3.1 6.9-6.9 6.9s-6.9-3.1-6.9-6.9c0-1.5.5-2.9 1.3-4zm21.7 16c0 2.1-1.9 4-4 4H7c-2.1 0-4-2-4-4V14.6h6.1c-.5 1.5-.8 2.8-.8 4.2 0 5.9 4.8 10.8 10.7 10.8 5.9 0 10.7-5 10.7-10.9 0-1.4-.3-2.7-.8-4.2H35V31z"/>
  </svg>
  Follow
</button>

<button class="button button--sms button--small button--icon" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" aria-hidden="true">
    <title>SMS</title>
    <path d="M13 36c-.3 0-.6-.1-.8-.2-.8-.3-1.2-1-1.2-1.8v-5.8c-5-.3-9-4.9-9-10.4v-6.3C2 5.7 5.8 2 11.6 2h14.7c5.9 0 9.6 3.7 9.6 9.4v6.3c0 5.8-3.8 10.3-9.6 10.3h-3l-9 7.4c-.3.3-.8.6-1.3.6z"/>
  </svg>
  SMS
</button>

Custom Buttons

When including solid with Sass it is possible to use the button-style mixin to include new colored button styles in your app. For an example see this gist.