極具美感的css3 icon導航

這個css3 icon導航：主要應用了border-radius，transition，font-face。先設定一個寬度並設定overflow為hidden，然後滑鼠滑過用transition來改變其寬度，以顯示文字資訊部分。至於三個icon，前面兩個為font-face做的，後面一個為圖片。

html代碼：

<div id="header"><p>Go Back to Design Shack</p></div><div><div><a href="http://www.php.cn/">

css代碼：

* {margin: 0;padding: 0;}#header {text-align: center;height: 30px;background: #444;}#header a {color: #fff;font: 100 14px/30px Helvetica, Verdana, sans-serif;}#header a:hover {color: #c2e9fa;}.container {width: 90%;margin: 0 auto;}/*Button*/.appstorebutton {height: 80px;width: 80px;margin: 50px;position: relative;overflow: hidden;float: left;-webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px;-webkit-transition: width 1s ease;-moz-transition: width 1s ease;-o-transition: width 1s ease;-ms-transition: width 1s ease;transition: width 1s ease;}.appstorebutton:hover {width: 275px;}.appstorebutton a {color: white;text-decoration: none;}/*Paragraph*/.appstorebutton p {font: 30px/1 Helvetica, Arial, sans-serif;text-align: center;color: white;margin: 4px 0 0 65px;width: 180px;}.appstorebutton p small {font-size: 15px;}.iphone small:before {content: "O";position: absolute;font: 70px/1 'ModernPictogramsNormal', Helvetica, sans-serif;top: 10px;left: 20px;}.ipad small:before {content: "Q";position: absolute;font: 70px/1 'ModernPictogramsNormal', Helvetica, sans-serif;top: 10px;left: 13px;}.mac small:before {content: url(imac.png);position: absolute;top: 22px;left: 18px;}/*Button Colors*/.iphone {background: #7b7a7f;}.ipad {background: #2ea9dc;}.mac {background: #dc2e2e;}/*Font-Face*/@font-face {font-family: 'ModernPictogramsNormal';src: url('modernpics-webfont.eot');src: url('modernpics-webfont.eot?#iefix') format('embedded-opentype'),url('modernpics-webfont.woff') format('woff'),url('modernpics-webfont.ttf') format('truetype'),url('modernpics-webfont.svg#ModernPictogramsNormal') format('svg');font-weight: normal;font-style: normal;}

