TWITTER BUTTON WITH CSS3 AND HTML5

Twitter Button With CSS3 and HTML5, Ekseperimen ini saya dapet di www.cssdeck.com. Eksperimen ini keren banget, cuman bermodal huruf 't' bisa jadi sebuah button atau tombol keren yang ada lambang burungnya ditengah. Padahal cuman bermodalkan huruf 't' loh. haha

Kalo yang mau lihat contohnya bisa langsung ke http://cssdeck.com/item/preview/384/twitter-button-with-css3-and-html5

Kalo yang pengen buat silahkan baca terus.. hehe

HTML

<button><span></span>t</button>

CSS

@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)));

    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',GradientType=0 );

    width: 500px;

    height: 500px;

    padding: 0 0 70px 0;

    border: none;

    text-shadow: 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);

    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-transition: all 0.4s;

    transition: all 0.4s;

}

/* on hover switch the gradients  */

button:hover {

    color: #ddd;

    background: rgb(255,255,255);

    background: -moz-linear-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%);

    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)), color-stop(70%,rgba(255,255,255,1)));

    background: -webkit-linear-gradient(top,  rgba(183,183,183,1) 0%,rgba(255,255,255,1) 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;

    -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;

}

html, body {

    height: 100%;

    background-attachment: fixed;

    background: url('http://dl.dropbox.com/u/48552248/websites/demos/twitter_button/pattern.jpg');

    margin: 0;

}

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,255,255,0.4) 0%,rgba(255,255,255,0) 100%);

    background: -ms-linear-gradient(top,  rgba(255,255,255,0.4) 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;

}

Coba aja di tes..
kalo berhasil pasti keren, gue juga udah pernah nyoba dan hasilnya.. waaaw
keren banget deh..