Instantly share code, notes, and snippets.
Created
November 23, 2011 18:11
-
Save deyvin/1389407 to your computer and use it in GitHub Desktop.
WEB 2.0 buttons with css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.button { | |
-moz-border-radius: 4px; | |
-webkit-border-radius: 4px; | |
-khtml-border-radius: 4px; | |
border-radius: 4px; | |
-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.3); | |
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.3); | |
box-shadow:inset 1px 1px 0 rgba(255,255,255,0.3); | |
cursor: pointer; | |
display: inline-block; | |
font: 12px/16px 'Lucida Grande', 'Lucida Sans Unicode', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif; | |
padding: 4px 10px; | |
outline: none !important; | |
text-align: center; | |
text-decoration: none; | |
position: relative; | |
-moz-box-sizing: border-box !important; | |
} | |
.button:hover { | |
text-decoration: none; | |
} | |
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; } | |
.button[disabled] { | |
-moz-box-shadow:none; | |
-webkit-box-shadow:none; | |
box-shadow: none; | |
} | |
.button-round { | |
-moz-border-radius: 16px; | |
-webkit-border-radius: 16px; | |
-khtml-border-radius: 16px; | |
border-radius: 16px; | |
padding: 7px 0; | |
width: 30px; | |
} | |
.button-gray { | |
background: #f1f1f1; | |
background: -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#d1d1d1)); | |
background: -moz-linear-gradient(top, #e9e9e9, #d1d1d1); | |
-pie-background: linear-gradient(top, #e9e9e9, #d1d1d1); | |
border: 1px solid #bbb; | |
color: #555; | |
text-shadow: 0 1px 0 #fff; | |
} | |
.button-gray:hover, .button-gray:focus { | |
border: 1px solid #aaa; | |
background: #ececec; | |
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#c1c1c1)); | |
background: -moz-linear-gradient(top, #e1e1e1, #c1c1c1); | |
-pie-background: linear-gradient(top, #e1e1e1, #c1c1c1); | |
border: 1px solid #999; | |
color: #555; | |
} | |
.button-gray:active, .button-gray.active, .button-gray.current { | |
background: #ddd; | |
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#e9e9e9)); | |
background: -moz-linear-gradient(top, #ccc, #e9e9e9); | |
-pie-background: linear-gradient(top, #ccc, #e9e9e9); | |
border: 1px solid #999; | |
color: #555; | |
} | |
.button-gray[disabled] { | |
background: #f1f1f1; | |
border: 1px solid #bbb; | |
color: #555; | |
text-shadow: 0 1px 0 #fff; | |
} | |
.button-orange { | |
background: #f78d1d; | |
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); | |
background: -moz-linear-gradient(top, #faa51a, #f47a20); | |
-pie-background: linear-gradient(top, #faa51a, #f47a20); | |
border: solid 1px #dd6611; | |
color: #fef4e9; | |
text-shadow: 0 1px 1px rgba(0,0,0,0.25); | |
} | |
.button-orange:hover, .button-orange:focus { | |
background: #f47c20; | |
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); | |
background: -moz-linear-gradient(top, #f88e11, #f06015); | |
-pie-background: linear-gradient(top, #f88e11, #f06015); | |
border: solid 1px #aa5511; | |
color: #fef4e9; | |
} | |
.button-orange:active, .button-orange.active, .button-orange.current { | |
background: #f47a20; | |
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); | |
background: -moz-linear-gradient(top, #f47a20, #faa51a); | |
-pie-background: linear-gradient(top, #f47a20, #faa51a); | |
border: solid 1px #aa5511; | |
color: #fef4e9; | |
} | |
.button-orange[disabled] { | |
background: #f78d1d; | |
border: solid 1px #dd6611; | |
color: #fef4e9; | |
text-shadow: 0 1px 1px rgba(0,0,0,0.25); | |
} | |
.button-red { | |
background-color: #C44747; | |
background: -moz-linear-gradient(top, #DD5F5F 10%, #A92C2C 90%); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #DD5F5F), color-stop(0.9, #A92C2C)); | |
-pie-background: linear-gradient(top, #DD5F5F 10%, #A92C2C 90%); | |
border: 1px solid #A92C2C; | |
color: #fef4e9; | |
text-shadow: 0 1px 1px rgba(0,0,0,0.25); | |
} | |
.button-red:hover, .button-red:focus { | |
background-color: #C44747; | |
background: -moz-linear-gradient(top, #DD4141 10%, #A92121 90%); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #DD4141), color-stop(0.9, #A92121)); | |
-pie-background: linear-gradient(top, #DD4141 10%, #A92121 90%); | |
border: 1px solid #711; | |
color: #fef4e9; | |
} | |
.button-red:active, .button-red.active, .button-red.current { | |
background-color: #C44747; | |
background: -moz-linear-gradient(top, #A92C2C 10%, #DD5F5F 90%); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #A92C2C), color-stop(0.9, #DD5F5F)); | |
-pie-background: linear-gradient(top, #A92C2C 10%, #DD5F5F 90%); | |
border: 1px solid #711; | |
color: #fef4e9; | |
} | |
.button-red[disabled] { | |
background: #C44747; | |
border: 1px solid #A92C2C; | |
color: #fef4e9; | |
text-shadow: 0 1px 1px rgba(0,0,0,0.25); | |
} | |
.button-blue { | |
background: #0095cd; | |
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); | |
background: -moz-linear-gradient(top, #00adee, #0078a5); | |
-pie-background: linear-gradient(top, #00adee, #0078a5); | |
border: 1px solid #034462; | |
color: #fff; | |
text-shadow: 0 1px 1px rgba(0,0,0,0.25); | |
} | |
.button-blue:hover, .button-blue:focus { | |
background: #007ead; | |
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); | |
background: -moz-linear-gradient(top, #0095cc, #00678e); | |
-pie-background: linear-gradient(top, #0095cc, #00678e); | |
border: 1px solid #234; | |
color: #fff; | |
} | |
.button-blue:active, .button-blue.active, .button-blue.current { | |
background: #80bed6; | |
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)); | |
background: -moz-linear-gradient(top, #0078a5, #00adee); | |
-pie-background: linear-gradient(top, #0078a5, #00adee); | |
border: 1px solid #234; | |
color: #fff; | |
} | |
.button-blue[disabled] { | |
background: #0095cd; | |
border: 1px solid #034462; | |
color: #fff; | |
text-shadow: 0 1px 1px rgba(0,0,0,0.25); | |
} | |
.button-green { | |
color: #fff; | |
background: #8fc857; | |
background: -webkit-gradient(linear, left top, left bottom, from(#8fc857), to(#5c9425)); | |
background: -moz-linear-gradient(top, #8fc857, #5c9425); | |
-pie-background: linear-gradient(top, #8fc857, #5c9425); | |
text-shadow: 0 1px 1px rgba(0,0,0,0.25); | |
border:1px solid #561; | |
} | |
.button-green:hover, .button-green:focus { | |
border:1px solid #556611; | |
background: #8fbb44; | |
background: -webkit-gradient(linear, left top, left bottom, from(#8fbb44), to(#5c8825)); | |
background: -moz-linear-gradient(top, #8fbb44, #5c8825); | |
-pie-background: linear-gradient(top, #8fbb44, #5c8825); | |
border:1px solid #342; | |
} | |
.button-green:active, .button-green.active, .button-green.current { | |
background: #8fbb44; | |
background: -webkit-gradient(linear, left top, left bottom, from(#5c8825), to(#8fbb44)); | |
background: -moz-linear-gradient(top, #5c8825, #8fbb44); | |
-pie-background: linear-gradient(top, #5c8825, #8fbb44); | |
border:1px solid #342; | |
} | |
.button-green[disabled] { | |
color: #fff; | |
background: #8fc857; | |
text-shadow: 0 1px 1px rgba(0,0,0,0.25); | |
border:1px solid #561; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment