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

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

 

1、相对定位

1 input.button{  
2   
3       position:relative; //用相对定位  
4 }  
5   
6 input.button:hover{  
7         top:2px;//鼠标移动到此top增加2px  
8 }

 

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

 1 input.button{  
 2   
 3  margin:2px; //先设置外边距为2px  
 4   
 5 }  
 6 input.button:hover{  
 7   
 8      margin-top:4px;  
 9      margin-bottom:0px;  
10   }

 

3、利用内边距，设置按钮的容器（btns）的内边距，跟上一种相对，上一个是从按钮本身出发，现在是从它的容器开始，相当于把按钮推下去0.2cm又拉回来0.2cm。

 1 #btns
 2 {
 3       padding: 0.3cm 0.5cm;
 4                //上下内边距都是0.3cm，左右内边距都是0.5cm
 5 } 
 6 
 7 
 8 #btns:hover
 9 {  
10     padding-top: 0.4cm;  
11      padding-bottom:0.2cm;  
12 }

   

哪里没讲清楚的请联系博主，一起探讨！

posted @ 2016-07-20 08:51  白一  阅读(1924)  评论(0)  编辑  收藏  举报