说到CSS 3D按钮,可能很多人不太明白,在平常的制作稿中,也许你会看到一些具有立体感的按钮,这些按钮是怎么写的呢?来看看这个例子,还同时具有按下去的效果。
<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; }
代码出来效果是这样子的:
按下去的代码是怎么写的呢?
.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; }
出来效果