f and t buttons in css3

f and t button made with css3

by James Doyle

HTML

<h1 class="fb">f</h1>
<h1 class="tt">t</h1>

CSS

@font-face { font-family: Pico; src: url('http://dl.dropbox.com/u/6913105/pico.TTF'); } 
h1 { 
    margin: 20px; 
    float:left; 
    color: #fff;
    font-size: 6em;
    font-weight: bold;
    text-align:right;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
    border-radius: 15px;
    box-shadow: 1px 2px 14px #A8A9A9;
}
h1.fb {
    font-family: arial;
    width: 60px;
    height: 80px;
    padding: 0px 10px 15px 25px;
    background: -webkit-linear-gradient(top, #325299 0%,#6b8ac8 32%,#2f529e 100%);
    border: 2px solid #3E61B1;
}
h1.tt {
    font-family: 'Pico';
    width: 50px;
    height: 90px;
    padding: 0px 10px 10px 40px;
    background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    border: 2px solid #41BFE0;
}