CSS3 icon Navigation with great aesthetics

This CSS3 icon navigation: mainly applies the border-radius,transition,font-face. First set a width and set overflow to hidden, then mouse over with transition to change its width to display the text Information section. As for the three icons, the first two were made for Font-face, the latter for the picture.

HTML code:

<div id= "header" ><p>go back to Design shack</p></div><div><div><a href= "http ://www.php.cn/">

CSS code:

* {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";p osition:absolute;font:70px/1 ' Modernpictogramsnormal ', Helvetica, Sans-serif;top: 10px;left:20px;}. ipad Small:before {Content: "Q";p osition:absolute;font:70px/1 ' Modernpictogramsnormal ', Helvetica, sans-serif;top:10px;left:13px;}. Mac Small:before {content:url (imac.png);p osition: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;}

