知名网站按钮 css 实现（含源码）_html/css_WEB-ITnose

本文收集了国内一些知名网站的按钮风格，并用按钮css生成器网站：http://buttoncssgenerator.com 对这些按钮做了实现，文中附上这些按钮的css源代码，希望对大家的工作和学习有所帮助。

1、

 

 

<a href='#' class='className'>百度一下</a>.className{  	line-height:39px;	height:39px;	width:102px;	color:#ffffff;	background-color:#3388ff;	font-size:16px;	font-weight:normal;	font-family:Arial;	border:0px solid #dcdcdc;	-webkit-border-top-left-radius:0px;	-moz-border-radius-topleft:0px;	border-top-left-radius:0px;	-webkit-border-top-right-radius:0px;	-moz-border-radius-topright:0px;	border-top-right-radius:0px;	-webkit-border-bottom-left-radius:0px;	-moz-border-radius-bottomleft:0px;	border-bottom-left-radius:0px;	-webkit-border-bottom-right-radius:0px;	-moz-border-radius-bottomright:0px;	border-bottom-right-radius:0px;	-moz-box-shadow: inset 0px 0px 0px 0px #ffffff;	-webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;	box-shadow: inset 0px 0px 0px 0px #ffffff;	text-align:center;	display:inline-block;	text-decoration:none;}.className:hover {	background-color:#3171f3;}

　　

2、

<a href='#' class='className'>免费开店</a>.className{  	line-height:25px;	height:25px;	width:76px;	color:#ffffff;	background-color:#ff4400;	font-size:12px;	font-weight:bold;	font-family:Arial;	border:0px solid #dcdcdc;	-webkit-border-top-left-radius:1px;/**按钮圆角**/	-moz-border-radius-topleft:1px;	border-top-left-radius:1px;	-webkit-border-top-right-radius:1px;	-moz-border-radius-topright:1px;	border-top-right-radius:1px;	-webkit-border-bottom-left-radius:1px;	-moz-border-radius-bottomleft:1px;	border-bottom-left-radius:1px;	-webkit-border-bottom-right-radius:1px;	-moz-border-radius-bottomright:1px;	border-bottom-right-radius:1px;	-moz-box-shadow: inset 0px 0px 0px 0px #ffffff;	-webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;	box-shadow: inset 0px 0px 0px 0px #ffffff;	text-align:center;	display:inline-block;	text-decoration:none;}.className:hover {	background-color:#f22d00;}

　　

3、

<a href='#' class='className'>搜索</a>.className{  	line-height:33px;	height:33px;	width:145px;	color:#ffffff;	background-color:#ffb000;	font-size:16px;	font-weight:bold;	font-family:Arial;	border:1px solid #e77c00;	-webkit-border-top-left-radius:3px;	-moz-border-radius-topleft:3px;	border-top-left-radius:3px;	-webkit-border-top-right-radius:3px;	-moz-border-radius-topright:3px;	border-top-right-radius:3px;	-webkit-border-bottom-left-radius:3px;	-moz-border-radius-bottomleft:3px;	border-bottom-left-radius:3px;	-webkit-border-bottom-right-radius:3px;	-moz-border-radius-bottomright:3px;	border-bottom-right-radius:3px;	-moz-box-shadow:0px 1px 0px 0px #955000;	-webkit-box-shadow:0px 1px 0px 0px #955000;	box-shadow:0px 1px 0px 0px #955000;/**按钮阴影效果**/	text-align:center;	display:inline-block;	text-decoration:none;}.className:hover {	background-color:#f79700;}

　　

4、

<a href='#' class='className'>登录</a>.className{  	line-height:30px;	height:30px;	width:70px;	color:#ffffff;	background-color:#3ba354;	font-size:13px;	font-weight:normal;	font-family:Arial;	border:0px solid #e77c00;	-webkit-border-top-left-radius:2px;	-moz-border-radius-topleft:2px;	border-top-left-radius:2px;	-webkit-border-top-right-radius:2px;	-moz-border-radius-topright:2px;	border-top-right-radius:2px;	-webkit-border-bottom-left-radius:2px;	-moz-border-radius-bottomleft:2px;	border-bottom-left-radius:2px;	-webkit-border-bottom-right-radius:2px;	-moz-border-radius-bottomright:2px;	border-bottom-right-radius:2px;	-moz-box-shadow:0px 0px 0px 0px #955000;	-webkit-box-shadow:0px 0px 0px 0px #955000;	box-shadow:0px 0px 0px 0px #955000;	text-align:center;	display:inline-block;	text-decoration:none;}.className:hover {	background-color:#1c9439;}

　　

5、

<a href='#' class='className'>发博文</a>.className{  	line-height:30px;	height:30px;	width:120px;	color:#000000;	background-color:#3ba354;	font-size:14px;	font-weight:normal;	font-family:SimSun;	background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #c5f0fa), color-stop(1, #6ccddd));/**背景色渐变效果，产生立体感**/	background:-moz-linear-gradient(top, #c5f0fa 5%, #6ccddd 100%);	background:-o-linear-gradient(top, #c5f0fa 5%, #6ccddd 100%);	background:-ms-linear-gradient(top, #c5f0fa 5%, #6ccddd 100%);	background:linear-gradient(to bottom, #c5f0fa 5%, #6ccddd 100%);	background:-webkit-linear-gradient(top, #c5f0fa 5%, #6ccddd 100%);	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c5f0fa', endColorstr='#6ccddd',GradientType=0);	border:1px solid #698d91;	-webkit-border-top-left-radius:4px;	-moz-border-radius-topleft:4px;	border-top-left-radius:4px;	-webkit-border-top-right-radius:4px;	-moz-border-radius-topright:4px;	border-top-right-radius:4px;	-webkit-border-bottom-left-radius:4px;	-moz-border-radius-bottomleft:4px;	border-bottom-left-radius:4px;	-webkit-border-bottom-right-radius:4px;	-moz-border-radius-bottomright:4px;	border-bottom-right-radius:4px;	-moz-box-shadow:0px 0px 0px 0px #955000;	-webkit-box-shadow:0px 0px 0px 0px #955000;	box-shadow:0px 0px 0px 0px #955000;	text-align:center;	display:inline-block;	text-decoration:none;}.className:hover {	background-color:#1c9439;	background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #6ccddd), color-stop(1, #c5f0fa));	background:-moz-linear-gradient(top, #6ccddd 5%, #c5f0fa 100%);	background:-o-linear-gradient(top, #6ccddd 5%, #c5f0fa 100%);	background:-ms-linear-gradient(top, #6ccddd 5%, #c5f0fa 100%);	background:linear-gradient(to bottom, #6ccddd 5%, #c5f0fa 100%);	background:-webkit-linear-gradient(top, #6ccddd 5%, #c5f0fa 100%);	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6ccddd', endColorstr='#c5f0fa',GradientType=0);}

　　

6、

<a href='#' class='className'>立即下载</a>.className{  	line-height:50px;	height:50px;	width:180px;	color:#ffffff;	background-color:#46c82f;	font-size:25px;	font-weight:normal;	font-family:Arial;	border:0px solid #698d91;	-webkit-border-top-left-radius:4px;	-moz-border-radius-topleft:4px;	border-top-left-radius:4px;	-webkit-border-top-right-radius:4px;	-moz-border-radius-topright:4px;	border-top-right-radius:4px;	-webkit-border-bottom-left-radius:4px;	-moz-border-radius-bottomleft:4px;	border-bottom-left-radius:4px;	-webkit-border-bottom-right-radius:4px;	-moz-border-radius-bottomright:4px;	border-bottom-right-radius:4px;	-moz-box-shadow:0px 0px 0px 0px #955000;	-webkit-box-shadow:0px 0px 0px 0px #955000;	box-shadow:0px 0px 0px 0px #955000;	text-align:center;	display:inline-block;	text-decoration:none;}.className:hover {	background-color:#18d110;}

　　

这些button css 支持各大主流浏览器， 各个网站的按钮各异，有圆角的，有立体风格的，有扁平风格的，有阴影的，有有边框的，颜色也各异，这些特色都可以使用按钮css生成器：http://buttoncssgenerator.com进行生成。