首页 > HTML5/CSS3

css3实现多种颜色的底部阴影按钮特效

发表于2014-07-31 20:02:25| --次阅读| 来源webkfa| 作者小猪仔

摘要：本页面向大家展开了各种漂亮的网页Button按钮样式，各式各样的都有，而且不用一张图片就实现了各种效果,适合不同的场合使用。CSS3技术的确非常强大，不过大家测试的时候不要使用IE8，因为IE8还没有完全支持css3，微软如此不屑CSS3，唉！请使用火狐或Safari或Google Chrome。
html5代码
运行代码 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="apple-touch-fullscreen" content="YES" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="format-detection" content="telephone=no" />

	<title>css3实现多种颜色的底部阴影按钮特效 - web开发</title>
    <style type="text/css">
body{ 
background: #dcdcdc;
}
.box{ 
width: 550px; 
text-align: center;
line-height: 46px; 
margin:40px auto; 
}
.btn{ 
position: relative;
font-weight:bold;
width: 124px; 
height: 44px; 
border-radius: 3px; 
border: 1px solid #c0c0c0; 
margin:0 50px 40px 0; 
 
}
.btn:nth-child(3n){
margin-right: 0;
}
.btn:nth-child(1){
color: #8c3e4a;
border-color: #ed7989;  
box-shadow:inset 0 1px 0 #f9a1b1,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#f78297,#f56c7e); 
background:-moz-linear-gradient(top,#f78297,#f56c7e); 
background:-o-linear-gradient(top,#f78297,#f56c7e); 
background:-ms-linear-gradient(top,#f78297,#f56c7e); 
background:linear-gradient(top,#f78297,#f56c7e); 
}
.btn:nth-child(1):hover{
background:-webkit-linear-gradient(top,#fbacbb,#f4798f); 
background:-moz-linear-gradient(top,#fbacbb,#f4798f); 
background:-o-linear-gradient(top,#fbacbb,#f4798f); 
background:-ms-linear-gradient(top,#fbacbb,#f4798f); 
background:linear-gradient(top,#fbacbb,#f4798f); 
}
.btn:nth-child(1):active{
top:4px;
box-shadow:inset 0 1px 3px #aa2c3d;
background:-webkit-linear-gradient(top,#e15c6d,#e15c6d); 
background:-moz-linear-gradient(top,#e15c6d,#e15c6d); 
background:-o-linear-gradient(top,#e15c6d,#e15c6d); 
background:-ms-linear-gradient(top,#e15c6d,#e15c6d); 
background:linear-gradient(top,#e15c6d,#e15c6d); 
 
}
.btn:nth-child(2){ 
color: #a67ea0; 
border-color: #e6addf; 
box-shadow:inset 0 1px 0 #ffdcfb,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#ffd0f9,#ffc2f7); 
background:-moz-linear-gradient(top,#ffd0f9,#ffc2f7); 
background:-o-linear-gradient(top,#ffd0f9,#ffc2f7); 
background:-ms-linear-gradient(top,#ffd0f9,#ffc2f7); 
background:linear-gradient(top,#ffd0f9,#ffc2f7); 
}
.btn:nth-child(2):hover{
background:-webkit-linear-gradient(top,#ffdefb,#fdc7f6); 
background:-moz-linear-gradient(top,#ffdefb,#fdc7f6); 
background:-o-linear-gradient(top,#ffdefb,#ffc2f7); 
background:-ms-linear-gradient(top,#ffdefb,#ffc2f7); 
background:linear-gradient(top,#ffdefb,#ffc2f7); 
}
.btn:nth-child(2):active{
top:4px;
box-shadow:inset 0 1px 3px #be27aa;
background:-webkit-linear-gradient(top,#f3b0ea,#f3b0ea); 
background:-moz-linear-gradient(top,#f3b0ea,#f3b0ea); 
background:-o-linear-gradient(top,#f3b0ea,#f3b0ea); 
background:-ms-linear-gradient(top,#f3b0ea,#f3b0ea); 
background:linear-gradient(top,#f3b0ea,#f3b0ea); 
}
.btn:nth-child(3){
color: #923e3e; 
border-color: #b74545; 
box-shadow:inset 0 1px 0 #fe8585,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#fd5c5c,#fd4a4a); 
background:-moz-linear-gradient(top,#fd5c5c,#fd4a4a); 
background:-ms-linear-gradient(top,#fd5c5c,#fd4a4a); 
background:-o-linear-gradient(top,#fd5c5c,#fd4a4a); 
background:linear-gradient(top,#fd5c5c,#fd4a4a); 
}
.btn:nth-child(3):hover{
background:-webkit-linear-gradient(top,#fd8d8d,#ff6161); 
background:-moz-linear-gradient(top,#fd8d8d,#ff6161); 
background:-o-linear-gradient(top,#fd8d8d,#ff6161); 
background:-ms-linear-gradient(top,#fd8d8d,#ff6161); 
background:linear-gradient(top,#fd8d8d,#ff6161); 
}
.btn:nth-child(3):active{
top:4px;
box-shadow:inset 0 1px 3px #a31818;
background:-webkit-linear-gradient(top,#d43535,#d43535); 
background:-moz-linear-gradient(top,#d43535,#d43535); 
background:-ms-linear-gradient(top,#d43535,#d43535); 
background:-o-linear-gradient(top,#d43535,#d43535); 
background:linear-gradient(top,#d43535,#d43535); 
}
.btn:nth-child(4){ 
color: #7f7f7f;
border-color: #c8c8c8;  
box-shadow:inset 0 1px 0 #e0e0e0,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#d7d7d7,#b7b7b7); 
background:-moz-linear-gradient(top,#d7d7d7,#b7b7b7); 
background:-o-linear-gradient(top,#d7d7d7,#b7b7b7); 
background:-ms-linear-gradient(top,#d7d7d7,#b7b7b7); 
background:linear-gradient(top,#d7d7d7,#b7b7b7); 
}
.btn:nth-child(4):hover{
background:-webkit-linear-gradient(top,#e3e3e3,#c2c0c0); 
background:-moz-linear-gradient(top,#e3e3e3,#c2c0c0); 
background:-o-linear-gradient(top,#e3e3e3,#c2c0c0); 
background:-ms-linear-gradient(top,#e3e3e3,#c2c0c0); 
background:linear-gradient(top,#e3e3e3,#c2c0c0); 
}
.btn:nth-child(4):active{
top:4px;
box-shadow:inset 0 1px 3px #555;
background:-webkit-linear-gradient(top,#a2a2a2,#a2a2a2); 
background:-moz-linear-gradient(top,#a2a2a2,#a2a2a2); 
background:-ms-linear-gradient(top,#a2a2a2,#a2a2a2); 
background:-o-linear-gradient(top,#a2a2a2,#a2a2a2); 
background:linear-gradient(top,#a2a2a2,#a2a2a2); 
}
.btn:nth-child(5){ 
color: #3295a4; 
border-color: #62d4e5; 
box-shadow:inset 0 1px 0 #92f3fe,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#71effe,#4be2fe); 
background:-moz-linear-gradient(top,#71effe,#4be2fe); 
background:-o-linear-gradient(top,#71effe,#4be2fe); 
background:-ms-linear-gradient(top,#71effe,#4be2fe); 
background:linear-gradient(top,#71effe,#4be2fe); 
}
.btn:nth-child(5):hover{
background:-webkit-linear-gradient(top,#9df5ff,#6ce6fc); 
background:-moz-linear-gradient(top,#9df5ff,#6ce6fc); 
background:-o-linear-gradient(top,#9df5ff,#6ce6fc); 
background:-ms-linear-gradient(top,#9df5ff,#6ce6fc); 
background:linear-gradient(top,#9df5ff,#6ce6fc); 
}
.btn:nth-child(5):active{
top:4px;
box-shadow:inset 0 1px 3px #1d8194;
background:-webkit-linear-gradient(top,#2bbed9,#2bbed9); 
background:-moz-linear-gradient(top,#2bbed9,#2bbed9); 
background:-o-linear-gradient(top,#2bbed9,#2bbed9); 
background:-ms-linear-gradient(top,#2bbed9,#2bbed9); 
background:linear-gradient(top,#2bbed9,#2bbed9); 
}
.btn:nth-child(6){ 
color: #a9a056;
border-color: #ddcc52;  
box-shadow:inset 0 1px 0 #fff48f,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#fff16d,#ffe647);
background:-moz-linear-gradient(top,#fff16d,#ffe647);
background:-ms-linear-gradient(top,#fff16d,#ffe647); 
background:-o-linear-gradient(top,#fff16d,#ffe647); 
background:linear-gradient(top,#fff16d,#ffe647); 
}
.btn:nth-child(6):hover{
background:-webkit-linear-gradient(top,#fff69f,#ffea61); 
background:-moz-linear-gradient(top,#fff69f,#ffea61); 
background:-o-linear-gradient(top,#fff69f,#ffea61); 
background:-ms-linear-gradient(top,#fff69f,#ffea61); 
background:linear-gradient(top,#fff69f,#ffea61); 
}
.btn:nth-child(6):active{
top:4px;
box-shadow:inset 0 1px 3px #bbac23;
background:-webkit-linear-gradient(top,#e2d12c,#e2d12c); 
background:-moz-linear-gradient(top,#e2d12c,#e2d12c); 
background:-o-linear-gradient(top,#e2d12c,#e2d12c); 
background:-ms-linear-gradient(top,#e2d12c,#e2d12c); 
background:linear-gradient(top,#e2d12c,#e2d12c); 
}
.btn:nth-child(7){ 
color: #8f7031;
border-color: #f1c462;  
box-shadow:inset 0 1px 0 #fee392,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#feda71,#f6be53);
background:-moz-linear-gradient(top,#feda71,#f6be53);
background:-ms-linear-gradient(top,#feda71,#f6be53); 
background:-o-linear-gradient(top,#feda71,#f6be53); 
background:linear-gradient(top,#feda71,#f6be53); 
}
.btn:nth-child(7):hover{
background:-webkit-linear-gradient(top,#ffe28e,#f6c463); 
background:-moz-linear-gradient(top,#ffe28e,#f6c463); 
background:-ms-linear-gradient(top,#ffe28e,#f6c463); 
background:-o-linear-gradient(top,#ffe28e,#f6c463); 
background:linear-gradient(top,#ffe28e,#f6c463); 
}
.btn:nth-child(7):active{
top:4px;
box-shadow:inset 0 1px 3px #b78421;
background:-webkit-linear-gradient(top,#e4ab3d,#e4ab3d); 
background:-moz-linear-gradient(top,#e4ab3d,#e4ab3d); 
background:-o-linear-gradient(top,#e4ab3d,#e4ab3d); 
background:-ms-linear-gradient(top,#e4ab3d,#e4ab3d); 
background:linear-gradient(top,#e4ab3d,#e4ab3d); 
}
.btn:before,
.btn:after{
position: absolute;
content: "";
height: 50%;
border-radius: 50%;
z-index: -1;
}
.btn:before {
width: 90%;
left: 5%;
top:12%;
box-shadow: 0 -7px 4px rgba(0,0,0,0.3);
}
.btn:active:before {
width: 90%;
left: 5%;
top:12%;
box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
.btn:after {
width: 80%;
left: 10%;
bottom: 9%;
box-shadow: 0 7px 4px rgba(0,0,0,0.4);
}
.btn:active:after {
width: 80%;
left: 10%;
bottom: 9%;
box-shadow: 0 0 0 rgba(0,0,0,0.4);
}
.box p:last-child{ 
font-size: 20px; 
font-weight: bold;
}
.box p:last-child span{ 
color: #fff;
}
	</style>
</head>
<body>

<div class="page">
	<header id="header">
		<hgrounp class="blank">
			<h1></h1>
			<h2><h2>
		</hgrounp>
	</header>
	<section class="demo">

<div class="box">
	<div class="form-actions">
		<button type="button" class="btn">Click Me</button>
		<button type="button" class="btn">Click Me</button>
		<button type="button" class="btn">Click Me</button>
		<button type="button" class="btn">Click Me</button>
		<button type="button" class="btn">Click Me</button>
		<button type="button" class="btn">Click Me</button>
		<button type="button" class="btn">Click Me</button>
	</div>
</div>
	
	</section>
</div>
<div style="text-align:center;clear:both; font-size:12px;">
<p><a href="http://www.webkfa.com" target="_blank">web开发学习</a>分享网站整理</p>
<p>欢迎大家进群讨论web开发技术知识！</p>
<p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p>
<p>来源：w3cplus</p>
</div>
</body>
</html>

相关文章

最新发布

阅读排行

热门文章

猜你喜欢

学到老在线代码浏览器 关闭浏览
友情链接: hao123 360导航 搜狗网址导航 114啦网址导航 博客大全
Copyright © 1999-2014, WEBKFA.COM, All Rights Reserved  京ICP备14034497号-1