css3 icon导航

本实例主要应用了border-radius，transition，font-face。先设置一个宽度并设置overflow为hidden，然后鼠标滑过用transition来改变其宽度，以显示文字信息部分。至于三个icon，前面两个为font-face做的，后面一个为图片。至于三个icon，前面两个为font-face做的，后面一个为图片。

demodownload

css主要代码：

.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;
}

demodownload

查看更多：http://designshack.net/articles/css/appstorebuttons/

 

Air Max 95 Stussy