如何在CSS中单击按钮时添加按下效果？

在本教程中，我们将学习如何使用 CSS 在按钮上添加按下效果。这种效果是现代 UI 设计的一部分，并在许多网站上使用。与正常行为相比，此效果允许用户体验与按钮元素的交互。

我们将利用active伪类。单击时，此类会自动添加到 HTML 元素中。

方法一：
当按钮处于活动状态时，我们可以使用CSS 变换属性在按钮上添加按下效果。 CSS transform 属性允许我们缩放、旋转、移动和倾斜元素。

示例 1：

  

    

  

  
    
    Button
  

  

输出：

方法二：
对于这种方法，我们可以使用 CSS 中的translate函数。我们将在按钮的活动状态上使用translateY( length )函数。 translateY()函数将 y 轴上的元素移动到给定的长度(以 px 为单位)。

示例 2：

  

    

  

  
    Click Me
  

  

输出：

当active伪类处于活动状态时，您可以使用其他方法在单击按钮时创建自己的效果。