Zurb Foundation -- Button Variations
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
/* echo 'hello world'; */
<div class="wrapper">
<h1>Zurb Foundation – 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>
/**
* 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*/