Skip to content

Instantly share code, notes, and snippets.

@colmtuite
Created April 18, 2017 13:41
Show Gist options
  • Save colmtuite/86163b0789cf98de691a18c1494417a4 to your computer and use it in GitHub Desktop.
Save colmtuite/86163b0789cf98de691a18c1494417a4 to your computer and use it in GitHub Desktop.
.euRYzy,
.oEaCQ,
.bJrroZ,
.fgYRvT {
display: -webkit-box;
display: -moz-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: all .15s ease;
-webkit-transition: all .15s ease;
text-transform: uppercase;
border: none;
border-radius: 3px;
font-weight: 600;
outline: none;
letter-spacing: .15px;
font-size: 12px;
height: 32px;
min-width: 32px;
line-height: 32px;
padding: 0 8px;
background-color: hsl(200, 50%, 99%);
color: hsl(200, 30%, 10%);
box-shadow: 0 0 0 1px hsl(200, 20%, 80%), 0 3px 6px 0 hsla(200, 30%, 10%, .05), 0 1px 3px 0 hsla(200, 30%, 10%, .1);
}
.euRYzy:hover {
transform: translateY(-1px);
-ms-transform: translateY(-1px);
-webkit-transform: translateY(-1px);
box-shadow: 0 0 0 1px hsl(200, 30%, 70%), 0 3px 6px 0 hsla(200, 30%, 10%, .05), 0 1px 3px 0 hsla(200, 30%, 10%, .1);
}
.euRYzy:active {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
box-shadow: 0 0 0 1px hsl(200, 30%, 70%);
}
.oEaCQ {
background-color: hsl(200, 100%, 97%);
color: hsl(200, 70%, 50%);
box-shadow: 0 0 0 1px hsl(200, 80%, 80%), 0 3px 6px 0 hsla(200, 30%, 10%, .05), 0 1px 3px 0 hsla(200, 30%, 10%, .1);
}
.oEaCQ:hover {
box-shadow: 0 0 0 1px hsl(200, 80%, 60%), 0 3px 6px 0 hsla(200, 30%, 10%, .05), 0 1px 3px 0 hsla(200, 30%, 10%, .1);
}
.oEaCQ:active {
box-shadow: 0 0 0 1px hsl(200, 80%, 60%);
}
.bJrroZ {
background-color: hsl(348, 100%, 97%);
color: hsl(348, 70%, 60%);
box-shadow: 0 0 0 1px hsl(348, 70%, 80%), 0 3px 6px 0 hsla(200, 30%, 10%, .05), 0 1px 3px 0 hsla(200, 30%, 10%, .1);
}
.bJrroZ:hover:hover {
box-shadow: 0 0 0 1px hsl(348, 70%, 60%), 0 3px 6px 0 hsla(200, 30%, 10%, .05), 0 1px 3px 0 hsla(200, 30%, 10%, .1);
}
.bJrroZ:hover:active {
box-shadow: 0 0 0 1px hsl(348, 70%, 60%);
}
.fgYRvT {
background-color: hsl(138, 100%, 97%);
color: hsl(138, 60%, 40%);
box-shadow: 0 0 0 1px hsl(138, 50%, 70%), 0 3px 6px 0 hsla(200, 30%, 10%, .05), 0 1px 3px 0 hsla(200, 30%, 10%, .1);
}
.fgYRvT:hover {
box-shadow: 0 0 0 1px hsl(138, 50%, 50%), 0 3px 6px 0 hsla(200, 30%, 10%, .05), 0 1px 3px 0 hsla(200, 30%, 10%, .1);
}
.fgYRvT:active {
box-shadow: 0 0 0 1px hsl(138, 50%, 50%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment