JSFiddle - React, Tailwind, and code Playground

Flat Buttons

by Yolanda Robles

HTML

<!-- Primary Page Layout
	================================================== -->

	<div class="container">
		<div class="sixteen columns">
			<h1 class="remove-bottom" style="margin-top: 40px">Beautiful Flat Buttons</h1>
            <h3><a href="http://designify.me" title="Designify.me" target="_blank">http://designify.me</a></h3>
					<hr />
		</div>
		<div class="one-third column">
			<h3>Sun Flower Flat Button</h3>
			<p><input type="submit" value="Sun Flower" class="sun-flower-button">
</p>
		</div>
		<div class="one-third column">
			<h3>Orange Flat Button</h3>
<p><input type="submit" value="Orange" class="orange-flat-button">
</p>			
	  </div>
		<div class="one-third column">
			<h3>Carrot Flat Button</h3>
			<p><input type="submit" value="Carrot" class="carrot-flat-button">
</p>
		</div>

<div class="sixteen columns">
		
		</div>
		<div class="one-third column">
			<h3>Pumpkin Flat Button</h3>
			<p><input type="submit" value="Pumpkin" class="pumpkin-flat-button">
</p>
		</div>
		<div class="one-third column">
			<h3>Alizarin Flat Button</h3>
<p><input type="submit" value="Alizarin" class="alizarin-flat-button">
</p>			
	  </div>
		<div class="one-third column">
			<h3>Pomegranate Flat Button</h3>
			<p><input type="submit" value="Pomegranate" class="pomegranate-flat-button">
</p>
		</div>

<div class="sixteen columns">
		
		</div>
		<div class="one-third column">
			<h3>Turquoise Flat Button</h3>
			<p><input type="submit" value="Turquoise" class="turquoise-flat-button">
</p>
		</div>
		<div class="one-third column">
			<h3>Green Sea Flat Button</h3>
<p><input type="submit" value="Green Sea" class="green-sea-flat-button">
</p>			
	  </div>
		<div class="one-third column">
			<h3>Emerald Flat Button</h3>
			<p><input type="submit" value="Emerald" class="emerald-flat-button">
</p>
		</div>
        
<div class="sixteen columns">
		
		</div>
		<div class="one-third column">
			<h3>Nephritis Flat Button</h3>
			<p><input type="submit" value="Nephritis"...

CSS

@charset "utf-8";
/* CSS Document */

body {
	background-color:#f9f9f9;
	text-align:center;}

h1, h2, h3, h4, h5, h6 {font-family: 'Montez', cursive;
color:#2d2d2d;}

h1 {
	font-size:46px;}
h3 {
	font-size:28px;}
a {color:#FF9715;}
a:hover{color:#454545;}
	

/* #Buttons
==================================================*/

/* #Sun Flower Button
==================================================*/
.sun-flower-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #f1c40f;
  border: 0;
  border-bottom: 2px solid #e2b607;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #e2b607;
  box-shadow: inset 0 -2px #e2b607;
}
.sun-flower-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Orange Flat Button
==================================================*/
.orange-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #f39c12;
  border: 0;
  border-bottom: 2px solid #e8930c;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #e8930c;
  box-shadow: inset 0 -2px #e8930c;
}
.orange-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Carrot Flat Button
==================================================*/
.carrot-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #e67e22;
  border: 0;
  border-bottom: 2px solid #da751c;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #da751c;
  box-shadow: inset 0 -2px #da751c;
}
.carrot-flat-button:active {
  top: 1px;
  outline: none;
 ...