css实现立体按钮

  最近在看《CSS揭秘》看到书里讲了使用 border-radius 实现各种圆润的形状，就做了一个立体按钮作为练习。

---

<button class="btnSweet">call</button>

.btnSweet{
		background:hsl(199, 50%, 85%);
		height:50px;
		width:150px;
		border-radius:20% 10% 20% 10% / 80% 10% 80% 10%;
		border:1px solid #58a;
		box-shadow:/*底部灰色阴影*/
			2px 4px 2px 5px rgba(0,0,0,0.2),
			/*下面深蓝色立体阴影*/
			2px 4px 1px 1px hsl(208, 50%, 55%),
                        /*内部暗色阴影*/
			0 -15px 2px 2px rgba(0,0,0,0.10) inset;
		color: hsl(208, 50%, 40%);
		text-shadow: rgba(255,255,255,.5) 0 1px 0;
		font: 24px/1em 'Droid Sans', sans-serif;
		font-weight: bold;
		
		margin:0 0 0 10px;
	}