css3黑色UI按钮

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3黑色UI按钮的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>css3黑色UI按钮</title>
	<link rel="stylesheet" href="style2.css">
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#button').on('click', function(){
				$(this).toggleClass('on');
			});
		});
	</script>
</head>
<body>
	<section>
		<a href="#" id="button"></a>
		<span></span>
	</section>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
</body>
</html>

CSS代码(style2.css):

body{background:url('http://subtlepatterns.com/patterns/micro_carbon.png');}
section{margin:150px auto 0;width:75px;height:95px;position:relative;text-align:center;}
:active,:focus{outline:0;}
/** Font-Face **/
@font-face{font-family:"FontAwesome";src:url("fonts/fontawesome-webfont.eot");src:url("fonts/fontawesome-webfont.eot?#iefix") format('eot'),url("fonts/fontawesome-webfont.woff") format('woff'),url("fonts/fontawesome-webfont.ttf") format('truetype'),url("fonts/fontawesome-webfont.svg#FontAwesome") format('svg');font-weight:normal;font-style:normal;}
/** Styling the Button **/
a{font-family:"FontAwesome";text-shadow:0px 1px 1px rgba(250,250,250,0.1);font-size:32pt;display:block;position:relative;text-decoration:none;box-shadow:0px 3px 0px 0px rgb(34,34,34),0px 7px 10px 0px rgb(17,17,17),inset 0px 1px 1px 0px rgba(250,250,250,.2),inset 0px -12px 35px 0px rgba(0,0,0,.5);width:70px;height:70px;border:0;color:rgb(37,37,37);border-radius:35px;text-align:center;line-height:79px;background-color:rgb(83,87,93);transition:color 350ms ease,text-shadow 350ms;-o-transition:color 350ms ease,text-shadow 350ms;-moz-transition:color 350ms ease,text-shadow 350ms;-webkit-transition:color 350ms ease,text-shadow 350ms;}
a:before{content:"";width:80px;height:80px;display:block;z-index:-2;position:absolute;background-color:rgb(26,27,29);left:-5px;top:-2px;border-radius:40px;box-shadow:0px 1px 0px 0px rgba(250,250,250,0.1),inset 0px 1px 2px rgba(0,0,0,0.5);}
a:active{box-shadow:0px 0px 0px 0px rgb(34,34,34),0px 3px 7px 0px rgb(17,17,17),inset 0px 1px 1px 0px rgba(250,250,250,.2),inset 0px -10px 35px 5px rgba(0,0,0,.5);background-color:rgb(83,87,93);top:3px;}
a.on{box-shadow:0px 0px 0px 0px rgb(34,34,34),0px 3px 7px 0px rgb(17,17,17),inset 0px 1px 1px 0px rgba(250,250,250,.2),inset 0px -10px 35px 5px rgba(0,0,0,.5);background-color:rgb(83,87,93);top:3px;color:#fff;text-shadow:0px 0px 3px rgb(250,250,250);}
a:active:before,a.on:before{top:-5px;background-color:rgb(26,27,29);box-shadow:0px 1px 0px 0px rgba(250,250,250,0.1),inset 0px 1px 2px rgba(0,0,0,0.5);}
/* Styling the Indicator light */
a + span{display:block;width:8px;height:8px;background-color:rgb(226,0,0);box-shadow:inset 0px 1px 0px 0px rgba(250,250,250,0.5),0px 0px 3px 2px rgba(226,0,0,0.5);border-radius:4px;clear:both;position:absolute;bottom:0;left:42%;transition:background-color 350ms,box-shadow 700ms;-o-transition:background-color 350ms,box-shadow 700ms;-moz-transition:background-color 350ms,box-shadow 700ms;-webkit-transition:background-color 350ms,box-shadow 700ms;}
a.on + span{box-shadow:inset 0px 1px 0px 0px rgba(250,250,250,0.5),0px 0px 3px 2px rgba(135,187,83,0.5);background-color:rgb(135,187,83);}

附件:下载该文件资源,减少时间成本(增值服务)