skill-assessment-app/vendor/assets/foundation-emails/docs/pages/button.md

title	description	sass
Button	Buttons are convenient tools when you need more traditional actions. To that end, Foundation has many easy to use button styles that you can customize or override to fit your needs.	scss/components/_button.scss

Creating a bullet-proof button that works in all email clients requires a table nested inside of a table. Put the class .button on the outer <table>. Inside of the inner table, put an <a> with an href attribute containing your link.

In Inky HTML, the <button> tag creates all of this markup for you.

<button href="#">Button</button>

- It's important to add an `href` attribute to your ``'s to ensure that Outlook.com will not display `[undefined]` in your rendered email.
- Office 365 and Outlook.com require a valid url in the href attribute or you can use the # placeholder.

---

Sizing

By default, buttons are sized by the content and padding within them. You can also size a button according to it's parent container (see Expanded section).

Buttons can be made larger or smaller by adding the class .tiny, .small, or .large to a button's outer <table>.

In Inky HTML, add the same class to the <button> tag.

<button href="#" class="tiny">Tiny Button</button>
<button href="#" class="small">Small Button</button>
<button href="#">Default Button</button>
<button href="#" class="large">Large Button</button>

Don't forget the href="" ;)

---

Expanded

To create an expanded button (full width of it's container), add the class .expanded to the outer <table> of the button, and wrap a <center> tag around the <a>.

In Inky HTML, add the .expanded class to the <button> tag. If you want the button to be expanded on small only, add the .small-expanded.

<row>
  <column>
    <button href="#" class="expanded">Expanded Button</button>
    <button href="#" class="small-expanded">Expand small only</button>
  </column>
</row>

---

Coloring

Change the background color of a button by adding the class .secondary, .success, .warning, or .alert to the outer <table> (or the <button> tag in Inky HTML).

<button href="#" class="secondary">Secondary Button</button>
<button href="#" class="success">Success Button</button>
<button href="#" class="warning">Warning Button</button>
<button href="#" class="alert">Alert Button</button>

---

Radius and Round

Creating buttons with a radius or rounded edges (like a pill) can be achieved by adding the .radius or .rounded class to a button.

Note - border-radius is not supported on Outlook 2000-2013, Yahoo! Mail, and Android 4+ (Gmail)

Note - In order to create .radius and .rounded buttons, the border needs to be removed.

<button href="#" class="radius">Radius</button>
<button href="#" class="rounded">Round</button>