純CSS3圓形按鈕

377711_4450769677156_696623231_n

這是用純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的方式嵌入特殊文字。
  1. @font-face {   
  2.     font-family'Social';   
  3.     srcurl('./fonts/socialicons-webfont.eot');   
  4.     srcurl('./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動畫的時間啦。

  1. transition:all 1s;  

最後看看Demo

留言

熱門文章