如何使用 HTML 和 CSS 为按钮创建文本显示效果？

按钮是任何网站最重要的用户界面组件。以创造性的独特方式设计按钮非常重要。当按钮用于显示一些优惠或令人兴奋的内容以增强用户体验时，就会使用按钮的文本显示效果。

方法：方法是用与按钮相同尺寸的条带覆盖按钮，然后在鼠标悬停时将其移动到任何方向。

HTML 代码：以下代码片段实现了按钮的创建。

  
    
    
    
  
  
    GeeksforGeeks
  

CSS 代码：

• 第 1 步：对按钮应用一些基本样式，例如添加填充和边框半径以具有圆角。
• 第 2 步：现在使用 before 选择器创建一个相同尺寸的条带以覆盖整个按钮。
• 第 3 步：现在使用悬停选择器将条带移动到任一方向，因为它在示例中向左移动。

注意：您可以根据需要将条带移动到任何方向。您也可以使用其他一些属性来根据您调整效果。

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

  

    
    
  
    
  
    

  

    GeeksforGeeks

  

输出：