@font-face {
font-family: 'WebSymbolsRegular';
src: url('http://dl.dropbox.com/u/48552248/websites/demos/twitter_button/websymbols-regular-webfont.eot');
src: url('http://dl.dropbox.com/u/48552248/websites/demos/twitter_button/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('http://dl.dropbox.com/u/48552248/websites/demos/twitter_button/websymbols-regular-webfont.woff') format('woff'), url('http://dl.dropbox.com/u/48552248/websites/demos/twitter_button/websymbols-regular-webfont.ttf') format('truetype'), url('http://dl.dropbox.com/u/48552248/websites/demos/twitter_button/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* styling of the button */
button {
font-family: 'WebSymbolsRegular';
position: relative;
color: #cfcfcf;
font-size: 21em;
cursor: pointer;
background: rgb(251,251,251);
background: -moz-linear-gradient(top, rgba(251,251,251,1) 0%, rgba(218,218,218,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,251,251,1)), color-stop(100%,rgba(218,218,218,1)));
=0 );
width: 500px;
height: 500px;
padding: 0 0 70px 0;
border: none;
text-
background: -webkit-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(218,218,218,1) 100%);
background: -o-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(218,218,218,1) 100%);
background: -ms-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(218,218,218,1) 100%);
background: linear-gradient(top, rgba(251,251,251,1) 0%,rgba(218,218,218,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#dadada',GradientTyp
eshadow: 0 -3px 3px #cfcfcf, 0 -5px 4px #9d9d9d, 0 -7px 0 #444, 0 2px 0 #fff, 0 2px 6px #fafafa;
-moz-box-shadow: inset 0 5px 3px #fff, inset 0 10px 15px #fafafa, 0 6px 3px #555, 0 12px 5px #777, 0 20px 15px #999, 0 40px 30px rgba(0,0,0,0.1), 0 120px 90px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 5px 3px #fff, inset 0 10px 15px #fafafa, 0 6px 3px #555, 0 12px 5px #777, 0 20px 15px #999, 0 40px 30px rgba(0,0,0,0.1), 0 120px 90px rgba(0,0,0,0.2);
ion: all 0.4s;
transition: all 0.4s;
}
/* on hover switch the gradients */
button:hover {
color: #ddd;
background: rgb(255,255,255);
background: -moz-linea
box-shadow: inset 0 5px 3px #fff, inset 0 10px 15px #fafafa, 0 6px 3px #555, 0 12px 5px #777, 0 20px 15px #999, 0 40px 30px rgba(0,0,0,0.1), 0 120px 90px rgba(0,0,0,0.2);
-moz-border-radius: 250px;
-webkit-border-radius: 250px;
border-radius: 250px;
-webkit-tap-highlight-color: rgba(0,0,0,0); /* on tap (iphone/ipad) don't grey button */
/* transitions */
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transi
tr-gradient(top, rgba(255,255,255,1) 0%, rgba(224,224,224,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(224,224,224,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 100%);
-stop(70%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(183,183,183,1) 0%,rgba(255,255,255,1
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e0e0',GradientType=0 );
text-shadow: 0 -3px 3px #ddd, 0 -5px 4px #aaa, 0 -7px 0 #777, 0 2px 0 #fff, 0 2px 6px #fafafa;
}
/* on active move the button down and change box shadow */
button:active {
padding-bottom: 60px;
color: #bbb;
background: rgb(183,183,183);
background: -moz-linear-gradient(top, rgba(183,183,183,1) 0%, rgba(255,255,255,1) 70%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(183,183,183,1)), colo
r) 70%);
background: -o-linear-gradient(top, rgba(183,183,183,1) 0%,rgba(255,255,255,1) 70%);
background: -ms-linear-gradient(top, rgba(183,183,183,1) 0%,rgba(255,255,255,1) 70%);
background: linear-gradient(top, rgba(183,183,183,1) 0%,rgba(255,255,255,1) 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7b7b7', endColorstr='#ffffff',GradientType=0 );
text-shadow: 0 -3px 3px #bbb, 0 -5px 4px #aaa, 0 -7px 0 #777, 0 2px 0 #fff, 0 2px 6px #fafafa;
-moz-box-shadow: inset 0 3px 5px #333, inset 0 8px 20px #555, 0 3px 2px #fff, 0 5px 5px #fcfcfc;
,255,0.4) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.4)
-webkit-box-shadow: inset 0 3px 5px #333, inset 0 8px 20px #555, 0 3px 2px #fff, 0 5px 5px #fcfcfc;
box-shadow: inset 0 3px 5px #333, inset 0 8px 20px #555, 0 3px 2px #fff, 0 5px 5px #fcfcfc;
}
body {
background: -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,25
5 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
text-align: center;
padding-top: 5%;
}
footer {
font-size: 12px;
font-weight: bold;
font-family: Helvetica, Arial, sans-serif;
line-height: 1.6em;
margin-top: 4%;
color: #666;
text-shadow: 0 1px 0 #fff;
}
a:link, a:visited {
color: #307191;
text-decoration: none;
border-bottom: dotted 1px #307191;
}
a:hover { color: #7da1b3 }
a:active {
top: 1px;
position: relative;
text-shadow: none;
}
.twitter-share-button {
vertical-align: -25%;
margin-right: -25px !important;
}
.logo {
border-bottom: none !important;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
padding: 15px;
display: inline-block;
}
<button><span></span>t</button>
