Foundation CSS Buttons
Foundation CSS provides flexible and responsive button components for modern web interfaces.
Button Styles
<button class="button primary">Primary</button> <button class="button secondary">Secondary</button> <button class="button success">Success</button> <button class="button warning">Warning</button> <button class="button alert">Alert</button>
Button Sizes
<button class="button tiny">Tiny</button> <button class="button small">Small</button> <button class="button">Default</button> <button class="button large">Large</button> <button class="button expanded">Expanded</button>
Hollow Buttons
<button class="button hollow primary">Primary</button> <button class="button hollow secondary">Secondary</button> <button class="button hollow success">Success</button> <button class="button hollow warning">Warning</button> <button class="button hollow alert">Alert</button>
Button Groups
<div class="button-group"> <a class="button">Left</a> <a class="button">Middle</a> <a class="button">Right</a> </div> <div class="stacked button-group"> <a class="button">One</a> <a class="button">Two</a> <a class="button">Three</a> </div>
Disabled Buttons
<button class="button primary" disabled>Disabled</button> <button class="button secondary disabled">Disabled</button>
Buttons with Icons
<button class="button primary"> <i class="fi-download"></i> Download </button>
Up next: Foundation CSS Forms