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

本文链接：https://blog.csdn.net/NanohaS/article/details/51960682

本文介绍了三种实现按钮按下视觉效果的方法，包括使用相对定位调整位置、改变外边距以及调整内部容器的内边距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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;
}

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