Created
July 6, 2011 12:03
-
-
Save anonymous/1067074 to your computer and use it in GitHub Desktop.
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
/* white button CSS VERSION */ | |
a.button-white-css { | |
display: inline-block; | |
vertical-align: middle; | |
padding: 1px; | |
line-height: 28px; | |
-moz-border-radius: 30px; | |
-webkit-border-radius: 30px; | |
border-radius: 30px; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
user-select: none; | |
-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.1); | |
-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.1); | |
box-shadow: 1px 2px 2px rgba(0,0,0,0.1); | |
background: -moz-linear-gradient(top, #d7d7d7 0%, #b6b6b6 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d7d7d7), color-stop(100%,#b6b6b6)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, #d7d7d7 0%,#b6b6b6 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, #d7d7d7 0%,#b6b6b6 100%); /* Opera11.10+ */ | |
background: -ms-linear-gradient(top, #d7d7d7 0%,#b6b6b6 100%); /* IE10+ */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d7d7', endColorstr='#b6b6b6',GradientType=0 ); /* IE6-9 */ | |
background: linear-gradient(top, #d7d7d7 0%,#b6b6b6 100%); /* W3C */ | |
} | |
a.button-white-css span { | |
display: block; | |
padding: 0 19px 1px 19px; | |
height: 27px; | |
color: #5e5e5e; | |
text-shadow: 0px -1px 0px #ffffff; | |
font-family: Helvetica, Arial, sans-serif; | |
font-size: 12px; | |
-moz-border-radius: 30px; | |
-webkit-border-radius: 30px; | |
border-radius: 30px; | |
-moz-box-shadow: inset 0px 0px 2px #ffffff; | |
-webkit-box-shadow: inset 0px 0px 2px #ffffff; | |
box-shadow: inset 0px 0px 2px 1px #ffffff; | |
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 49%, #fafafa 50%, #fafafa 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(49%,#ffffff), color-stop(50%,#fafafa), color-stop(100%,#fafafa)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 49%,#fafafa 50%,#fafafa 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, #ffffff 0%,#ffffff 49%,#fafafa 50%,#fafafa 100%); /* Opera11.10+ */ | |
background: -ms-linear-gradient(top, #ffffff 0%,#ffffff 49%,#fafafa 50%,#fafafa 100%); /* IE10+ */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa',GradientType=0 ); /* IE6-9 */ | |
background: linear-gradient(top, #ffffff 0%,#ffffff 49%,#fafafa 50%,#fafafa 100%); /* W3C */ | |
} | |
/* focus + hover */ | |
a.button-white-css:focus { | |
outline: none; | |
background: -moz-linear-gradient(top, #c6c6c6 0%, #a6a6a6 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c6c6c6), color-stop(100%,#a6a6a6)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, #c6c6c6 0%,#a6a6a6 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, #c6c6c6 0%,#a6a6a6 100%); /* Opera11.10+ */ | |
background: -ms-linear-gradient(top, #c6c6c6 0%,#a6a6a6 100%); /* IE10+ */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6c6c6', endColorstr='#a6a6a6',GradientType=0 ); /* IE6-9 */ | |
background: linear-gradient(top, #c6c6c6 0%,#a6a6a6 100%); /* W3C */ | |
} | |
a.button-white-css:hover span, | |
a.button-white-css:focus span { | |
background: -moz-linear-gradient(top, #fafafa 0%, #fafafa 49%, #f1f1f1 50%, #f1f1f1 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(49%,#fafafa), color-stop(50%,#f1f1f1), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, #fafafa 0%,#fafafa 49%,#f1f1f1 50%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, #fafafa 0%,#fafafa 49%,#f1f1f1 50%,#f1f1f1 100%); /* Opera11.10+ */ | |
background: -ms-linear-gradient(top, #fafafa 0%,#fafafa 49%,#f1f1f1 50%,#f1f1f1 100%); /* IE10+ */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#f1f1f1',GradientType=0 ); /* IE6-9 */ | |
background: linear-gradient(top, #fafafa 0%,#fafafa 49%,#f1f1f1 50%,#f1f1f1 100%); /* W3C */ | |
} | |
/* active */ | |
a.button-white-css:active { | |
-moz-box-shadow: 1px 1px 0px #ffffff; | |
-webkit-box-shadow: 1px 1px 0px #ffffff; | |
box-shadow: 1px 1px 0px #ffffff; | |
background: -moz-linear-gradient(top, #a6a6a6 0%, #cccccc 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a6a6a6), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, #a6a6a6 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, #a6a6a6 0%,#cccccc 100%); /* Opera11.10+ */ | |
background: -ms-linear-gradient(top, #a6a6a6 0%,#cccccc 100%); /* IE10+ */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6a6a6', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */ | |
background: linear-gradient(top, #a6a6a6 0%,#cccccc 100%); /* W3C */ | |
} | |
a.button-white-css:active span { | |
-moz-box-shadow: inset 1px 1px 0px #c9c9c9; | |
-webkit-box-shadow: inset 1px 1px 0px #c9c9c9; | |
box-shadow: inset 1px 1px 0px #c9c9c9; | |
padding-top: 1px; | |
padding-bottom: 0px; | |
background: -moz-linear-gradient(top, #e9e9e9 0%, #fefefe 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9e9e9), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, #e9e9e9 0%,#fefefe 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, #e9e9e9 0%,#fefefe 100%); /* Opera11.10+ */ | |
background: -ms-linear-gradient(top, #e9e9e9 0%,#fefefe 100%); /* IE10+ */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */ | |
background: linear-gradient(top, #e9e9e9 0%,#fefefe 100%); /* W3C */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment