Skip to content

Instantly share code, notes, and snippets.

@mikedugan
Created November 7, 2013 14:22
Show Gist options
  • Save mikedugan/7355319 to your computer and use it in GitHub Desktop.
Save mikedugan/7355319 to your computer and use it in GitHub Desktop.
CSS 3 buttons
[class*='btn-'] {
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
color: #fff;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 8px 16px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: background-color 0.1s linear;
-moz-transition: background-color 0.1s linear;
-o-transition: background-color 0.1s linear;
transition: background-color 0.1s linear;
}
[class*='btn-']:hover {
cursor: pointer;
}
.btn-blue {
background-color: rgb( 51, 102, 204 );
border: 1px solid rgb( 44, 91, 104 );
}
.btn-blue:hover {
background-color: rgb( 58, 131, 213 );
}
.btn-blue:active {
background-color: rgb( 42, 91, 191 );
}
.btn-primary {
background-color: rgb( 74, 61, 117 );
border: 1px solid rgb( 44, 37, 59 );
}
.btn-primary:hover {
background-color: rgb( 92, 76, 131 );
}
.btn-primary:active {
background-color: rgb( 54, 44, 87 );
}
.btn-red {
background-color: rgb( 207, 56, 91 );
border: 1px solid rgb( 187, 40, 74 );
}
.btn-red:hover {
background-color: rgb( 227, 77, 130 );
}
.btn-red:active {
background-color: rgb( 187, 40, 74 );
}
.btn-green {
background-color: rgb( 43, 153, 91 );
border: 1px solid rgb( 33, 126, 74 );
}
.btn-green:hover {
background-color: rgb( 75, 183, 141 );
}
.btn-green:active {
background-color: rgb( 33, 126, 74 );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment