如何使用 HTML 和 CSS 创建 Shaky 按钮？

摇晃按钮是过去十年中引入的一种按钮效果。它是我们用来设计按钮样式的最少使用的效果之一。这可以在按钮充当贪睡按钮时使用。

方法：创建此动画的方法是使用skewX()函数和关键帧来为每一帧的倾斜角度设置动画。

HTML 部分：在此部分中，定义了基本的 HTML 页面结构并创建了一个新按钮，该按钮稍后将使用 CSS 进行样式设置。

代码：

HTML

  

    

  

    

        GeeksforGeeks
    
    
        Creating a shaky button using
        HTML and CSS
    
    

  
        
        
            GeeksforGeeks
        
    
  

  

CSS 部分：在本部分中，我们将为按钮设置样式并为其应用动画以获得所需的效果。应遵循以下步骤：

• 第 1 步：创建一个将用于设置按钮样式的新类。将基本样式应用到此按钮类，例如边距、填充和一些边框以分隔和定位按钮。
• 步骤 2：使用skewX()函数将按钮倾斜到 x 轴上的特定角度。角度第一次应该是负值。
• 第 3 步：使用悬停选择器在按钮悬停时应用动画和效果。
• 第 4 步：使用关键帧使用 skew函数创建动画。角度的顺序应在原始负角度与其正值之间交替。通过指定按钮摇晃的次数，可以将一帧分成多帧。

提示： :before选择器的使用是完全可选的，可以为按钮设置不同的效果，但是，必须确保交替使用角度值，一个为正，另一个为负，

代码：

CSS

完整代码：是以上两段代码的组合。

HTML

  

    
  
    

  

    

        GeeksforGeeks
    
    Creating a shaky button using
        HTML and CSS
    

  
        
        
            GeeksforGeeks
        
    

  

输出：