Skip to content

Instantly share code, notes, and snippets.

@aklassen
Created December 13, 2011 14:39
Show Gist options
  • Save aklassen/1472339 to your computer and use it in GitHub Desktop.
Save aklassen/1472339 to your computer and use it in GitHub Desktop.
Stud.IP CSS Buttons
/* Buttons */
a.button, button {
display: inline-block;
position: relative;
margin: 0.7em 0.5em 0.7em 0;
padding: 5px 15px 5px 15px;
border-style: solid;
border-width: 1px;
border-top-color: #cdd;
border-left-color: #ccf;
border-right-color: #bbF;
border-bottom-color: #99b;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
background-color: #cddae4;
font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
font-size: 10px;
line-height: 130%;
text-decoration: none;
color: #181818;
cursor: pointer;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f4f7), to(#97abb7));
/* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #f0f4f7 0%, #cddae4 50%, #97abb7 100%);
background-image: -moz-linear-gradient(top, #f0f4f7 0%, #cddae4 50%, #97abb7 100%);
background-image: -ms-linear-gradient(top, #f0f4f7 0%, #cddae4 50%, #97abb7 100%);
background-image: -o-linear-gradient(top, #f0f4f7 0%, #cddae4 50%, #97abb7 100%);
background-image: linear-gradient(top, #f0f4f7 0%, #cddae4 50%, #97abb7 100%);
min-width: 93px;
text-align: center;
vertical-align: middle; }
a.button:hover, button:hover {
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#b5c3cc));
/* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, white 0%, #eef3f6 50%, #b5c3cc 100%);
background-image: -moz-linear-gradient(top, white 0%, #eef3f6 50%, #b5c3cc 100%);
background-image: -ms-linear-gradient(top, white 0%, #eef3f6 50%, #b5c3cc 100%);
background-image: -o-linear-gradient(top, white 0%, #eef3f6 50%, #b5c3cc 100%);
background-image: linear-gradient(top, white 0%, #eef3f6 50%, #b5c3cc 100%);
border-top-color: #f33;
border-left-color: #f00;
border-right-color: #f55;
border-bottom-color: #f55; }
a.button:active, button:active {
background-image: -webkit-gradient(linear, left top, left bottom, from(#cfdce5), to(#7993a2));
/* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #cfdce5 0%, #acc1d2 50%, #7993a2 100%);
background-image: -moz-linear-gradient(top, #cfdce5 0%, #acc1d2 50%, #7993a2 100%);
background-image: -ms-linear-gradient(top, #cfdce5 0%, #acc1d2 50%, #7993a2 100%);
background-image: -o-linear-gradient(top, #cfdce5 0%, #acc1d2 50%, #7993a2 100%);
background-image: linear-gradient(top, #cfdce5 0%, #acc1d2 50%, #7993a2 100%); }
a.button::-moz-focus-inner, button::-moz-focus-inner {
border: 0; }
button {
width: auto;
overflow: visible; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment