点击效果：点击后会将下部阴影给遮挡
代码+注释：
/*
transition 属性设置元素当过渡效果，四个简写属性为：
transition-property 指定CSS属性的name，transition效果
transition-duration transition效果需要指定多少秒或
毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值
transition-delay 定义transition效果开始的时候(time:延迟几秒。)
注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。
简写模式：
transition: property duration timing-function delay;
eg:transition: all 150ms ease-in 2s*/
/*to bottom指从顶部开始
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction 用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,... 用于指定渐变的起止颜色。*/
box-shadow: 0 .25em 0 rgba(23,59,109,0.3),inset 0 1px 0 rgba(0,0,0,0.3);
/*内部阴影指元素内部的阴影*/
/*boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影*/
<!DOCTYPE html>
<html>
<head>
<title>button的过渡</title>
<style type="text/css">
button {
cursor: pointer;/*cursor:一些不同的光标。pointer指的是手指光标*/
border: 0px;
padding: .5em 1em;
color: #fff;
border-radius: .25em;
font-size: 1em;
background-color: #173b6d;
background-image: linear-gradient(to bottom,#1a4a8e,#173b6d);/*从顶部颜色渐变*/
}
/*过渡*/
.focus{
background-color: #2158a9;
background-image: linear-gradient(to bottom,#2063c0,#1d4d90);
box-shadow: 0 .25em 0 rgba(23,59,109,0.3),inset 0 1px 0 rgba(0,0,0,0.3);
transition: all 150ms;
}
.focus:active {
box-shadow: 0 0 0 rgba(23,59,109,0.3),inset 0 1px 0rgba(0,0,0,0.3);
transform: translateY(.25em);
}
</style>
</head>
<body>
<button type="subbmit">提交部件</button>
<button type="subbmit" class="focus">提交部件</button>
</body>
</html>