Skip to content

Instantly share code, notes, and snippets.

@matijs matijs/index.html
Created Jun 8, 2015

Embed
What would you like to do?
mJmxOG
<p>
<a href="#" class="button">Foo Bar</a>
<button type="button" class="button">Baz Quux</button>
</p>
* {
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.