JSFiddle - React, Tailwind, and code Playground

Snap Buttons

by Jennifer Perrin

HTML

<!-- Default Buttons -->
<div class="demo">
  <button class="snap snap-lg">Default Lg</button>
  <button class="snap snap-md">Default Md</button>
  <button class="snap snap-sm">Default Sm</button>
  <button class="snap snap-xs">Default Xs</button>
</div>

<!-- Primary Buttons -->
<div class="demo">
  <button class="snap snap-lg snap-primary">Primary Lg</button>
  <button class="snap snap-md snap-primary">Primary Md</button>
  <button class="snap snap-sm snap-primary">Primary Sm</button>
  <button class="snap snap-xs snap-primary">Primary Xs</button>
</div>

<!-- Info Buttons -->
<div class="demo">
  <button class="snap snap-lg snap-info">Info Lg</button>
  <button class="snap snap-md snap-info">Info Md</button>
  <button class="snap snap-sm snap-info">Info Sm</button>
  <button class="snap snap-xs snap-info">Info Xs</button>
</div>

<!-- Success Buttons -->
<div class="demo">
  <button class="snap snap-lg snap-success">Success Lg</button>
  <button class="snap snap-md snap-success">Success Md</button>
  <button class="snap snap-sm snap-success">Success Sm</button>
  <button class="snap snap-xs snap-success">Success XS</button>
</div>

<!-- Warning Buttons -->
<div class="demo">
  <button class="snap snap-lg snap-warning">Warning Lg</button>
  <button class="snap snap-md snap-warning">Warning Md</button>
  <button class="snap snap-sm snap-warning">Warning Sm</button>
  <button class="snap snap-xs snap-warning">Warning XS</button>
</div>

<!-- Danger Buttons -->
<div class="demo">
  <button class="snap snap-lg snap-danger">Danger Lg</button>
  <button class="snap snap-md snap-danger">Danger Md</button>
  <button class="snap snap-sm snap-danger">Danger Sm</button>
  <button class="snap snap-xs snap-danger">Danger Xs</button>
</div>

<!-- Inverse Buttons -->
<div class="demo">
  <button class="snap snap-lg snap-inverse">Inverse Lg</button>
  <button class="snap snap-md snap-inverse">Inverse Md</button>
  <button class="snap snap-sm snap-inverse">Inverse Sm</button>
 ...

CSS

/* =========================================================================
    Misc.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css?family=Muli:300,400,600,700");
.demo { padding: 0.25em 0.5em; }

/* ==========================================================================
    Snap Buttons
   ========================================================================== */
.snap {
	display: inline-block;
	background-color: #bfbfbf;
	border: none;
	border-radius: .4em;
	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 -0.25em 0 rgba(0, 0, 0, 0.25), 0 0.25em 0.25em rgba(0, 0, 0, 0.05);
			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 -0.25em 0 rgba(0, 0, 0, 0.25), 0 0.25em 0.25em rgba(0, 0, 0, 0.05);
	color: #fff;
	cursor: pointer;
	font-family: 'Muli', sans-serif;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 1px;
	padding: .5em 1.5em .75em;
	position: relative;
	text-decoration: none;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
	vertical-align: middle;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
}
	.snap:hover { background: #8f8f8f; }
	.snap:active {
		-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.1), inset 0 0.25em 0.5em rgba(0, 0, 0, 0.05);
				box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.1), inset 0 0.25em 0.5em rgba(0, 0, 0, 0.05);
		margin-top: .25em;
		padding-bottom: .5em;
	}
	.snap:active, .snap:focus { outline: none; }

/* ========== Sizes ========== */
.snap-lg { font-size: 1.5em; }
.snap-md { font-size: 1.25em; }
.snap-sm { font-size: 1em; }
.snap-xs { font-size: 0.75em; }

/* ========== Colors ========= */
.snap-primary { background-color: #3498db; }
.snap-primary:hover { background: #2772a4; }
.snap-info { background-color: #63cbed; }
.snap-info:hover { background: #4a98b2; }
.snap-success {...