关于上一篇鼠标移到按钮时的“按下”效果的三种方法

上一篇博文中，关于按钮按下的效果回过头研究了下，总结了如下三种方法，只写出关键样式：

1、相对定位input.button{

position:relative; //用相对定位
}

input.button:hover{
top:2px;//鼠标移动到此top增加2px
}

2、主要利用外边距这个属性，鼠标移动到按钮位置时，按钮上外边距增加2px,下外边距减少2px（相当于走出去2px又退回来2px），就可以达到按下效果，如果只是单独写margin-top:2px；鼠标移动到按钮时，后面的按钮也会跟着一起向下移动。
input.button{

margin:2px; //先设置外边距为2px

}
input.button:hover{

margin-top:4px;
margin-bottom:0px;
}

 3、利用内边距，设置按钮的容器（btns）的内边距，跟上一种相对，上一个是从按钮本身出发，现在是从它的容器开始，相当于把按钮推下去0.2cm又拉回来0.2cm。
<span style="font-family:monospace;color:#000000;font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">#btns{padding: 0.3cm 0.5cm;} //上下内边距都是0.3cm，左右内边距都是0.5cm</span>
#btns:hover{
padding-top: 0.4cm;
padding-bottom:0.2cm;
}
哪里没讲清楚的请联系博主，一起探讨！