使用 CSS 分割倾斜按钮悬停动画

可以使用 CSS 中的 before 和 after 伪类创建拆分倾斜按钮悬停动画效果。在悬停时改变偏度并交换伪类前后的位置。

脚步：

• 创建一个名为 index.html 的 HTML 文件。
• 为按钮创建一个 div 元素。
• 为按钮添加样式。
• 在按钮的before和after伪类上，设置按钮的背景颜色，设置宽度为50%，并将两者都转换成倾斜某个角度。
• 在按钮的before伪类上，将顶部位置设置在按钮顶部位置的上方。
• 在按钮的after伪类上，将顶部位置设置在按钮顶部位置的下方，并将左侧位置设置为按钮宽度的50%。
• 悬停时，将两个伪类的顶部位置设置为 0，并将偏度更改为 0 度。

代码：

HTML

  

    

  

    

        
GeeksforGeeks
    

  

输出：