CSS 3D 按钮立体按钮

说到CSS 3D按钮,可能很多人不太明白,在平常的制作稿中,也许你会看到一些具有立体感的按钮,这些按钮是怎么写的呢?来看看这个例子,还同时具有按下去的效果。

CSS-3D-Push-Button-Demo

<a href="#" class="push_button">
	Push Me
</a>
/****************************************************
 * 	Push Button
 *****************************************************/
.push_button{
	position:relative;
	width:200px;
	color:#FFF;
	display:block;
	text-decoration:none;
	margin:0 auto;
	border-radius:5px;
	border:solid 1px #D94E3B;
	background:#cb3b27;
	text-align:center;
	padding:20px 30px;
	
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	
	-webkit-box-shadow: 0px 9px 0px #84261a;
        -moz-box-shadow: 0px 9px 0px #84261a;
        box-shadow: 0px 9px 0px #84261a;
}

代码出来效果是这样子的:

CSS-3D-Push-Button-Demo1

按下去的代码是怎么写的呢?

.push_button:active{
    -webkit-box-shadow: 0px 2px 0px #84261a;
    -moz-box-shadow: 0px 2px 0px #84261a;
    box-shadow: 0px 2px 0px #84261a;
    position:relative;
    top:7px;
}

出来效果

CSS-3D-Push-Button-Demo-Active

演示 代码来源

原创文章:CSS 3D 按钮立体按钮 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/css-3d-button.html)
评论已关闭。

“CSS 3D 按钮立体按钮”有1个评论