Skip to content

Instantly share code, notes, and snippets.

@deitrick

deitrick/index.html

Created October 9, 2012 16:45
Show Gist options
  • Save deitrick/3859970 to your computer and use it in GitHub Desktop.
Save deitrick/3859970 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<body>
<a class="button" href="#">Click Me Please</a>
<a class="button" href="#">Click Me Please</a>
<a class="button" href="#">Click Me Please</a>
<a class="button" href="#">Click Me Please</a>
<a class="button" href="#">Click Me Please</a>
<a class="button" href="#">Click Me Please</a>
</body>
Raw
style.scss
@import "compass";
$grey: grey;
$white: white;
$red: red;
$blue: blue;
$black: black;
$green: green;
@import "compass/css3";
@import "compass/reset";
body {
padding: 2em;
}
.button {
padding: 10px;
color: $black;
font: 22px arial, sans-serif;
text-shadow: 1px 1px #777;
text-decoration: none;
border: 1px solid #000;
margin: 10px 10px;
@include transition-property(box-shadow);
@include transition-duration(.1s);
@include box-shadow(rgba(black, 0.8) 2px 2px 4px);
}
.button:nth-child(1) {
@include border-radius(3px);
background: $red;
}
.button:nth-child(2) {
@include border-radius(9px);
background: $green;
}
.button:nth-child(3) {
@include border-radius(15px);
background: $black;
color: $white;
}
.button:nth-child(4) {
@include border-radius(25x);
background: $blue;
color: $white;
}
.button:nth-child(5) {
@include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px);
background: $grey;
color: $white;
}
.button:nth-child(6) {
@include border-radius(3px 20px);
}
.button:hover {
@include box-shadow(rgba(black, 0.8) 2px 2px 4px, rgba(black, 0.5)2px 2px 5px inset);
}
.button:active {
@include box-shadow(rgba(black, 0.8) 1px 1px 1px, rgba(black, 0.5)2px 2px 5px inset);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment