mJmxOG

index.html

	<p>
		<a href="#" class="button">Foo Bar</a>
		<button type="button" class="button">Baz Quux</button>
	</p>

mJmxOG.markdown

mJmxOG

A Pen by Matijs Brinkhuis on CodePen.

License.

style.css

		* {
		  box-sizing: border-box;
		}
		
		html {
		  background-color: hsl(300, 100%, 15%);
		  font-family: sans-serif;
		  font-size: 18px;
		}
		
		body {
		  padding: 5em 1em;
		  text-align: center;
		}
		
		.button {
		  background-color: hsl(328, 100%, 54%);
		  border: 0;
		  border-radius: .25em;
		  box-shadow: 0 0 .5em 0 hsla(0, 0%, 0%, .25);
		  color: white;
		  cursor: pointer;
		  display: inline-block;
		  font-size: inherit;
		  font-weight: bold;
		  height: 40px;
		  line-height: 40px;
		  padding: 0 1em;
		  text-decoration: none;
		  transition: all 25ms ease-in-out;
      vertical-align: middle;
		  -moz-osx-font-smoothing: grayscale;
		  -webkit-font-smoothing: antialias;
		  -webkit-appearance: none;
		  -moz-appearance: none;
		}
		
		.button:focus {
		  box-shadow: 0 0 .5em 0 hsla(0, 0%, 0%, .25), 0 0 0 .15em hsla(0, 100%, 100%, .25);
		  outline: 0;
		}
		
		.button:hover {
		  background-color: hsl(328, 100%, 48%);
		}
		
		.button:active {
		  -webkit-transform: scale(.985);
		  -moz-transform: scale(.985);
		  transform: scale(.985);
		}