Instantly share code, notes, and snippets.

Embed
What would you like to do?
The CSS and Sass code for my blog on making a 3D CSS button.
// These are some nice reusable mixins I keep around
@mixin transition($type, $time, $ease) {
-webkit-transition: $type $time $ease;
transition: $type $time $ease;
}
@mixin border-radius($length) {
border-radius: $length;
-webkit-border-radius: $length;
-moz-border-radius: $length;
}
.big-button {
color: #000300;
background-color: #00910A;
padding: 10px;
position: relative;
text-align: center;
font-size: 24px;
font-weight: bold;
@include transition(background-color, 0.2s, linear);
@include border-radius(10px);
box-shadow:
1px 1px 0 0 #014D06,
2px 2px 0 0 #014D06,
3px 3px 0 0 #014D06,
4px 4px 0 0 #014D06,
5px 5px 5px 0 #000000;
-webkit-box-shadow:
1px 1px 0 0 #014D06,
2px 2px 0 0 #014D06,
3px 3px 0 0 #014D06,
4px 4px 0 0 #014D06,
5px 5px 5px 0 #000000;
-moz-box-shadow:
1px 1px 0 0 #014D06,
2px 2px 0 0 #014D06,
3px 3px 0 0 #014D06,
4px 4px 0 0 #014D06,
5px 5px 5px 0 #000000;
&:hover { background-color: #00B00C; }
&:active {
box-shadow: 1px 1px 5px 0 #000000;
-webkit-box-shadow: 1px 1px 5px 0 #000000;
-moz-box-shadow: 1px 1px 5px 0 #000000;
top: 4px;
left: 4px;
}
}
.big-button {
color: #000300;
background-color: #00910A;
padding: 10px;
position: relative;
text-align: center;
font-size: 24px;
font-weight: bold;
box-shadow:
1px 1px 0 0 #014D06,
2px 2px 0 0 #014D06,
3px 3px 0 0 #014D06,
4px 4px 0 0 #014D06,
5px 5px 5px 0 #000000;
-webkit-box-shadow:
1px 1px 0 0 #014D06,
2px 2px 0 0 #014D06,
3px 3px 0 0 #014D06,
4px 4px 0 0 #014D06,
5px 5px 5px 0 #000000;
-moz-box-shadow:
1px 1px 0 0 #014D06,
2px 2px 0 0 #014D06,
3px 3px 0 0 #014D06,
4px 4px 0 0 #014D06,
5px 5px 5px 0 #000000;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
}
.big-button:active {
box-shadow: 1px 1px 5px 0 #000000;
-webkit-box-shadow: 1px 1px 5px 0 #000000;
-moz-box-shadow: 1px 1px 5px 0 #000000;
top: 4px;
left: 4px;
}
.big-button:hover { background-color: #00B00C; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment