码迷,mamicode.com
首页 > Web开发 > 详细

知名网站按钮 css 实现(含源码)

时间:2015-10-27 20:16:42      阅读:296      评论:0      收藏:0      [点我收藏+]

标签:

本文收集了国内一些知名网站的按钮风格,并用按钮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进行生成。

知名网站按钮 css 实现(含源码)

标签:

原文地址:http://www.cnblogs.com/coosummer/p/4915035.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!