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

时间:2016-06-24 11:34:44 来源:互联网 作者: 神秘的大神 字体:

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

1、

百度一下.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、

免费开店.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、

搜索.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、

登录.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、

发博文.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、

立即下载.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进行生成。