css Zurb基金会 - 按钮变化

Posted 2021-05-13

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}

/* echo 'hello world'; */

<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>

/**
 * 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*/