Css Kode

@import url(http://fonts.googleapis.com/css?family=Averia+Libre);
.facebook {
position:relative;
width: 280px;
height: 300px;
background-image: -webkit-linear-gradient(left, #315D9E, #4E70B7);
background-image: -moz-linear-gradient(left, #315D9E, #4E70B7);
background-image: linear-gradient(left, #315D9E, #4E70B7);
overflow: hidden;
margin: 0 auto;
border-radius: 18%;
}
.facebook:before{
content:"";
position:absolute;
z-index:1;
left:0;
right:0;
top:0;
width:100%;
height:200px;
border-radius:0 0 0 50%;
background:rgba(222,222,222,.2);
}  
.facebook-logo {
position: absolute;
z-index:9;
left:15px;
right:15px;
top:15px;
bottom:15px;
height:auto;
width:auto;
border: 15px solid #ccc;
border-radius:15%;
text-align:center;
font:bold 300px/250px Averia Libre;
color:#ddd;
text-shadow:0 0 10px #000;
}
.facebook-logo:hover{
transform:rotate(4deg);
-webkit-transform:rotate(4deg);
cursor:pointer;
background:#4E70B7;
box-shadow:0 0 5px #000;
}

Html Kode

<div class="facebook">
<div class="facebook-logo">
F
</div>
</div>