Skip to content

Instantly share code, notes, and snippets.

@Potherca Potherca/dabblet.css
Last active Aug 29, 2015

Embed
What would you like to do?
Zurb Foundation -- Button Variations
/**
* Zurb Foundation -- Button Variations
*/
@import url('//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.3/css/foundation.min.css');
.wrapper {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.wrapper:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.wrapper > div {
display: inline-block;
}
/*EOF*/
<div class="wrapper">
<h1>Zurb Foundation &ndash; Button Classes</h1>
<div class="custom-button-group">
<h2>Sizes</h2>
<p>
<a href="#" class="button tiny">Tiny Button</a>
<a href="#" class="button small">Small Button</a>
<a href="#" class="button">Default Button</a>
<a href="#" class="button large">Large Button</a>
</p>
<h2>Color</h2>
<p>
<a href="#" class="button secondary">Secondary Button</a>
<a href="#" class="button success">Succes Button</a>
<a href="#" class="button alert">Alert Button</a>
</p>
<h2>Radius</h2>
<p>
<a href="#" class="button radius">Radius Button</a>
<a href="#" class="button round">Round Button</a>
</p>
<h2>Disabled</h2>
<p>
<a href="#" class="button disabled">Disabled Button</a>
</p>
<h2>Expand</h2>
<p>
<a href="#" class="button expand">Expanded Button</a>
</p>
</div>
</div>
/* echo 'hello world'; */
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.