如何使用 HTML 和 CSS 创建改变按钮颜色的效果？

按钮的变色效果很常见，但是我们将要对这种效果做一个稍微高级的版本。背景会像以特定角度旋转的剪辑效果一样变化。

方法：方法是提供两个或三个背景，然后将它们旋转到不同的角度。

HTML 代码：在本节中，我们将使用 HTML 代码来设计 body 结构。

  

    
    
    

  

    GeeksforGeeks

  

CSS 代码：在本节中，我们将按照一些步骤来设计按钮效果。

• 步骤1：首先，我们设置按钮的位置，然后使用text-decoration 属性从链接中删除下划线。另外，设置按钮的宽度、高度、颜色和背景颜色。
• 第 2 步：这里我们使用 before 选择器旋转应用第二个背景。我们已经使用 z-index 将此背景显示在其他背景的顶部。
• 第 3 步：现在，使用悬停和选择器之前的嵌套选择应用具有不同旋转度的最终背景。

提示：您可以根据需要更改旋转度数以稍微改变效果。

下面是上述三个步骤的实现。

完整代码：在本节中，我们将结合上述部分，使用 HTML 和 CSS 对按钮进行变色效果。

  

    
    
    
    

  

    GeeksforGeeks

  

输出：