利用css制作3D按钮

利用css制作3D按钮

<p class="button"><b>按这里</b></p>

用一个块元素制作按钮主体，用一个行内元素制作按钮上显示的字
接着书写样式。

.button{width:150px;
		height:150px;
		background: #ffff00;

按钮大小和颜色可以按照自己喜好。

border-radius: 100%;
box-shadow: 0 25px 0 #ffda00,
    		0 35px 5px rgba(0,0,0,0.3); 
text-align: center;
font:30px/150px "";

border-radius: 100%；使原本方形的块元素变成圆形；
为其设置两个阴影，第一个阴影设置在圆的下方，颜色要取接近圆的颜色且更深一些，这样可以实现一个类似背光的效果，使人眼产生错觉，让按钮变得立体；第二个阴影在更下方一些，设置成半透明的黑色来模拟按钮的阴影。
接着设置文本效果，调整其大小，使其居中。

此时按钮的初始外观已经完成，接着设置按下效果。

cursor:pointer;
transition: 0.2s linear;

cursor：pointer；使得鼠标放在按钮上呈现可点击状态；
transition属性为按钮添加一个动画过渡效果，使按钮被按下时能慢慢地向下移动

.button:active{transform: translateY(20px);
		      box-shadow: 0 5px 0 #ffda00,
                          0 15px 5px rgba(0,0,0,0.3);}

设置一个伪类，使鼠标按下时圆得到一个向下平移的效果，同时box-shadow中的2个阴影的Y轴的距离也应减少同样的数量。
随着圆的向下移动，阴影相对圆的纵向位移也会慢慢减少，二者结合使得2d的平面移动给人眼一种实现了按下一个立体按钮的3D效果。

效果图

END
THANK YOU FOR WATCHING