Beautiful css3 icon navigation

This css3 icon navigation: mainly uses border-radius, transition, and font-face. First set a width and set overflow to hidden, then slide the mouse over and use transition to change its width to display the text information part. As for the three icons, the first two are made for font-face, and the last one is a 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";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;
}