純CSS3圓形按鈕

這是用純css寫出來的social netowork選單，有興趣可以試試看。

結構就像這樣而已。


<div class="menu">
<ul class="primary-menu">
<li class="facebook"><a class="social-item" href="#">f</a><span class="social-span">Become a fan on Facebook</span></li>
<li class="twitter"><a class="social-item" href="#">t</a><span class="social-span">Follow us on Twitter</span></li>
<li class="flickr"><a class="social-item" href="#">c</a><span class="social-span">Add us on Flickr</span></li>
<li class="rss"><a class="social-item" href="#">a</a><span class="social-span">Follow our updates through RSS</span></li>
<li class="mail"><a class="social-item" href="#">k</a><span class="social-span">Subscribe to our newsletter</span></li>
</ul>
</div>


這個完全沒有用到圖片，圖形是用font-face的方式嵌入特殊文字。

view plaincopy to clipboardprint?

1. @font-face {   
2.     font-family: 'Social';   
3.     src: url('./fonts/socialicons-webfont.eot');   
4.     src: url('./fonts/socialicons-webfont.eot?#iefix') format('embedded-opentype'),   
5.          url('./fonts/socialicons-webfont.woff') format('woff'),   
6.          url('./fonts/socialicons-webfont.ttf') format('truetype'),   
7.          url('./fonts/socialicons-webfont.svg#SocialIconsMedium') format('svg');   
8. }  

看原始碼就知道f會變成Facebook的F，t會變成twitter的t。

再來就是用css3動畫的時間啦。

view plaincopy to clipboardprint?

1. transition:all 1s;  

最後看看Demo。