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--icon xs-mr1 xs-mb1" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 28" aria-hidden="true">
    <title>RSS</title>
    <path d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"></path>
  </svg>
  RSS
</button>

<button class="button button--apple-news button--icon xs-mr1 xs-mb1" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" aria-hidden="true">
    <title>Apple News</title>
    <path fill-rule="evenodd" d="M16.3564.813l.7374.0107c.4352.013 1 .0384 1.5475.1353.5095.0897.9684.2413 1.405.4624.44.2243.8372.514 1.1837.863.348.3467.6377.7458.864 1.1838.2215.4363.3703.8955.4573 1.408.098.53.1265 1.0798.1408 1.5406.005.245.005.4902.005.7465.0062.2912.0062.5807.0062.8734v7.9435c0 .296 0 .584-.0063.886 0 .2486 0 .4922-.005.7312-.0142.4683-.0426 1.0174-.1407 1.5523-.087.5047-.2358.9652-.4542 1.3987-.2293.44-.519.8387-.8685 1.1868-.345.348-.7422.6377-1.182.8608-.429.2183-.8894.3702-1.4052.4652-.5348.0933-1.0823.1202-1.5412.136-.2483.0048-.4936.0064-.742.0064-.291.0015-.5855.0015-.875.0015H7.519c-.2962 0-.589 0-.8876-.0014-.2445 0-.487-.0016-.7283-.0063-.4655-.016-1.013-.0428-1.5506-.136-.5146-.095-.9732-.247-1.4004-.4653-.437-.22-.8347-.511-1.1867-.8656-.347-.3417-.635-.739-.8616-1.1804-.2184-.4303-.3687-.886-.46-1.405-.1013-.554-.1255-1.114-.1362-1.5476-.005-.171-.0074-.3434-.01-.5158l-.003-.2153V7.1597l.003-.2242c.0026-.1714.005-.3418.01-.5162.0107-.428.035-.9887.1378-1.5472.0897-.5165.24-.975.46-1.403.225-.4423.513-.8395.8624-1.1845.3496-.3508.7472-.6404 1.185-.863.4325-.2212.8925-.3728 1.399-.4625C4.9013.862 5.4676.8367 5.896.8237L6.6326.813C6.93.8114 7.2228.8114 7.519.8114h7.964c.2895 0 .584 0 .8734.0016zm2.3373 4.2626h.0366c.0103 0 .0206 0 .0308.0005.0225.0007.0452.002.0673.006.0225.004.0434.0105.064.021.02.0102.0382.0235.0542.0394.016.016.0292.0343.0395.0544.0104.0204.017.0413.021.0638.004.022.0053.0447.006.067.0002.0103.0003.0206.0003.031v12.5327c-.0004.0365-.0008.073-.0018.1096-.002.0796-.0068.1598-.021.2385-.0143.08-.0377.1543-.0747.227-.0364.0713-.0838.1365-.1404.193-.0566.0566-.122.104-.1933.1405-.0725.0368-.147.0603-.2268.0746-.0787.0142-.159.019-.2387.021-.0366.001-.0732.0014-.1097.0017-.0435.0003-.0868.0003-.1303.0003H4.1325c.1652 0 .3135-.0542.4448-.1543.132-.1006.2253-.24.27-.3995.021-.076.0306-.152.035-.23.005-.086.0046-.172.0046-.258V5.395v-.0365c0-.0103.0002-.0206.0005-.0308.0006-.0224.002-.045.006-.067.004-.0226.0105-.0435.021-.064.01-.02.0235-.0383.0394-.0543.0158-.016.0342-.0292.0542-.0394.0204-.0105.0414-.017.064-.021.022-.004.0446-.0053.067-.006.0103-.0003.0205-.0003.031-.0004h13.5234zM3.3077 18.7418c-.1313-.1005-.224-.2397-.2682-.399-.021-.0758-.0306-.1517-.035-.2298-.005-.086-.0045-.1717-.0045-.2576V6.9687c0-.047.0003-.057.0005-.0675.0006-.0223.002-.0448.0058-.067.004-.0223.0106-.0433.021-.0637.0102-.02.0234-.0383.0392-.0542.0158-.016.034-.0293.054-.0395.0203-.0104.0412-.017.0635-.021.022-.004.0445-.0053.0667-.0058l.021-.0004 1.3033.0008v11.462c0 .4332-.3495.784-.778.7836h-.035c-.164 0-.3238-.0542-.4543-.1542z"/>
    <path d="M11.558 12.2043h-1.097c-.0984 0-.1927-.039-.2623-.1086L6.4823 8.3802c-.0695-.0695-.1086-.1638-.1086-.262V7.0213c0-.2047.166-.3708.371-.3708h1.0998c.0984 0 .1927.039.2622.1086l3.7137 3.7156c.0695.0695.1087.1638.1087.262v1.0967c0 .2047-.166.3708-.371.3708zm-.2694-3.561l-.4812-.5107-.8735-.8434c-.2358-.2356-.0688-.6386.2645-.6386h1.356c.2067 0 .3742.1675.3742.374v1.354c0 .3334-.4044.5003-.64.2647zm-3.1914 3.561H6.747c-.206 0-.373-.1668-.373-.3727v-1.3498c0-.3322.4017-.4985.6367-.2636l.4962.496.854.8537c.235.2348.0684.6364-.2638.6364zM6.7697 13.7345c-.2053 0-.3718.1665-.3718.372 0 .2053.1664.3718.3717.3718v.001h12.2437v-.7448H6.7697zM6.7697 15.178c-.2053 0-.3718.1664-.3718.3718 0 .2054.1664.372.3717.372v.001h12.2437v-.745H6.7697zM6.7697 16.6213c-.2053 0-.3718.1665-.3718.372 0 .2053.1664.3718.3717.3718v.0012h12.2437v-.745H6.7697z"/>
  </svg>
  Follow
</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>

<button class="button button--rss button--small button--icon xs-mr1 xs-mb1" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 28" aria-hidden="true">
    <title>RSS</title>
    <path d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"></path>
  </svg>
  RSS
</button>

<button class="button button--apple-news button--small button--icon xs-mr1 xs-mb1" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" aria-hidden="true">
    <title>Apple News</title>
    <path fill-rule="evenodd" d="M16.3564.813l.7374.0107c.4352.013 1 .0384 1.5475.1353.5095.0897.9684.2413 1.405.4624.44.2243.8372.514 1.1837.863.348.3467.6377.7458.864 1.1838.2215.4363.3703.8955.4573 1.408.098.53.1265 1.0798.1408 1.5406.005.245.005.4902.005.7465.0062.2912.0062.5807.0062.8734v7.9435c0 .296 0 .584-.0063.886 0 .2486 0 .4922-.005.7312-.0142.4683-.0426 1.0174-.1407 1.5523-.087.5047-.2358.9652-.4542 1.3987-.2293.44-.519.8387-.8685 1.1868-.345.348-.7422.6377-1.182.8608-.429.2183-.8894.3702-1.4052.4652-.5348.0933-1.0823.1202-1.5412.136-.2483.0048-.4936.0064-.742.0064-.291.0015-.5855.0015-.875.0015H7.519c-.2962 0-.589 0-.8876-.0014-.2445 0-.487-.0016-.7283-.0063-.4655-.016-1.013-.0428-1.5506-.136-.5146-.095-.9732-.247-1.4004-.4653-.437-.22-.8347-.511-1.1867-.8656-.347-.3417-.635-.739-.8616-1.1804-.2184-.4303-.3687-.886-.46-1.405-.1013-.554-.1255-1.114-.1362-1.5476-.005-.171-.0074-.3434-.01-.5158l-.003-.2153V7.1597l.003-.2242c.0026-.1714.005-.3418.01-.5162.0107-.428.035-.9887.1378-1.5472.0897-.5165.24-.975.46-1.403.225-.4423.513-.8395.8624-1.1845.3496-.3508.7472-.6404 1.185-.863.4325-.2212.8925-.3728 1.399-.4625C4.9013.862 5.4676.8367 5.896.8237L6.6326.813C6.93.8114 7.2228.8114 7.519.8114h7.964c.2895 0 .584 0 .8734.0016zm2.3373 4.2626h.0366c.0103 0 .0206 0 .0308.0005.0225.0007.0452.002.0673.006.0225.004.0434.0105.064.021.02.0102.0382.0235.0542.0394.016.016.0292.0343.0395.0544.0104.0204.017.0413.021.0638.004.022.0053.0447.006.067.0002.0103.0003.0206.0003.031v12.5327c-.0004.0365-.0008.073-.0018.1096-.002.0796-.0068.1598-.021.2385-.0143.08-.0377.1543-.0747.227-.0364.0713-.0838.1365-.1404.193-.0566.0566-.122.104-.1933.1405-.0725.0368-.147.0603-.2268.0746-.0787.0142-.159.019-.2387.021-.0366.001-.0732.0014-.1097.0017-.0435.0003-.0868.0003-.1303.0003H4.1325c.1652 0 .3135-.0542.4448-.1543.132-.1006.2253-.24.27-.3995.021-.076.0306-.152.035-.23.005-.086.0046-.172.0046-.258V5.395v-.0365c0-.0103.0002-.0206.0005-.0308.0006-.0224.002-.045.006-.067.004-.0226.0105-.0435.021-.064.01-.02.0235-.0383.0394-.0543.0158-.016.0342-.0292.0542-.0394.0204-.0105.0414-.017.064-.021.022-.004.0446-.0053.067-.006.0103-.0003.0205-.0003.031-.0004h13.5234zM3.3077 18.7418c-.1313-.1005-.224-.2397-.2682-.399-.021-.0758-.0306-.1517-.035-.2298-.005-.086-.0045-.1717-.0045-.2576V6.9687c0-.047.0003-.057.0005-.0675.0006-.0223.002-.0448.0058-.067.004-.0223.0106-.0433.021-.0637.0102-.02.0234-.0383.0392-.0542.0158-.016.034-.0293.054-.0395.0203-.0104.0412-.017.0635-.021.022-.004.0445-.0053.0667-.0058l.021-.0004 1.3033.0008v11.462c0 .4332-.3495.784-.778.7836h-.035c-.164 0-.3238-.0542-.4543-.1542z"/>
    <path d="M11.558 12.2043h-1.097c-.0984 0-.1927-.039-.2623-.1086L6.4823 8.3802c-.0695-.0695-.1086-.1638-.1086-.262V7.0213c0-.2047.166-.3708.371-.3708h1.0998c.0984 0 .1927.039.2622.1086l3.7137 3.7156c.0695.0695.1087.1638.1087.262v1.0967c0 .2047-.166.3708-.371.3708zm-.2694-3.561l-.4812-.5107-.8735-.8434c-.2358-.2356-.0688-.6386.2645-.6386h1.356c.2067 0 .3742.1675.3742.374v1.354c0 .3334-.4044.5003-.64.2647zm-3.1914 3.561H6.747c-.206 0-.373-.1668-.373-.3727v-1.3498c0-.3322.4017-.4985.6367-.2636l.4962.496.854.8537c.235.2348.0684.6364-.2638.6364zM6.7697 13.7345c-.2053 0-.3718.1665-.3718.372 0 .2053.1664.3718.3717.3718v.001h12.2437v-.7448H6.7697zM6.7697 15.178c-.2053 0-.3718.1664-.3718.3718 0 .2054.1664.372.3717.372v.001h12.2437v-.745H6.7697zM6.7697 16.6213c-.2053 0-.3718.1665-.3718.372 0 .2053.1664.3718.3717.3718v.0012h12.2437v-.745H6.7697z"/>
  </svg>
  Follow
</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.