Skip to content

Instantly share code, notes, and snippets.

@colmtuite
Last active October 28, 2016 15:44
Show Gist options
  • Save colmtuite/23540eb8c1cedf1f22d74dd368b80dea to your computer and use it in GitHub Desktop.
Save colmtuite/23540eb8c1cedf1f22d74dd368b80dea to your computer and use it in GitHub Desktop.
/* Root styles */
.button {
display: inline-block;
vertical-align: middle;
appearance: none;
white-space: nowrap;
outline-style: none;
user-select: none;
font-weight: 500;
text-decoration: none;
text-align: center;
cursor: pointer;
border-radius: 4px;
border-width: 0;
transisition-property: all;
transition-duration: 100ms;
transition-timing-function: ease;
}
/* Size styles */
.button--large {
height: 50px;
min-width: 50px;
line-height: 50px;
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
}
.button--medium {
height: 40px;
min-width: 40px;
line-height: 40px;
padding-left: 10px;
padding-right: 10px;
font-size: 16px;
}
/* Type styles */
.button--flat {
box-shadow: 0 3px 6px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.08);
}
.button--flat:hover {
box-shadow: 0 5px 10px rgba(0,0,0,.15),0 3px 6px rgba(0,0,0,.1);
transform: translateY(-1px);
}
.button--ghost {
border-width: 1px;
border-style: solid;
background: transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment