如何使用HTML和CSS创建按钮的文本揭示效果

在本文中，我们将讨论使用HTML和CSS创建按钮的文本揭示效果的方法。

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

该方法是用与按钮大小相同的条带覆盖按钮，然后在鼠标悬停时将其向任一方向移动。

要继续使用上述方法，我们需要了解两个选择器，即before和hover，这些选择器将用于按钮的文本揭示效果方法和CSS属性。

::before选择器是CSS伪元素，用于在其他元素的内容之前多次添加相同的内容。此选择器与::after选择器相同。它帮助创建伪元素，表示所选元素的第一个子元素，并且通常用于使用content属性向元素添加装饰性内容。其默认值为inline。

语法

以下是before选择器的语法-

element ::before{
   content:
}

:hover选择器是CSS伪类，用于在鼠标悬停在元素上时样式化这些元素。它可用于任何元素，在鼠标悬停在元素上时选择元素。

语法

以下是before选择器的语法−

element :hover{ 
   // CSS declarations;
}

以下HTML代码片段实现了使用button标签创建简单按钮。

Index.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content=
         "width=device-width, initial-scale=1.0" />
      <title>Create Text Reveal Effect for Buttons using HTML and CSS</title>
   </head>
   <body>
      <button>Text Reveal</button>
   </body>
</html>

CSS 代码 −

以下是实现 CSS 代码的步骤 −

步骤 1 − 对按钮应用一些基本样式，如添加 padding 和 border-radius 以实现圆角。

步骤 2 − 使用 before 选择器创建一个具有相同尺寸的条纹，以覆盖整个按钮。

步骤 3 − 使用 hover 选择器将条纹移动到任意一个方向，例如在示例中向左移动。

注意 − 您可以根据需要将条纹移动到任何方向。此外，您可以使用其他属性来调整效果。

Index.css

<style>
    button {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 20px;
        padding: 15px;
    }
    button::before {
        content: "";
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background: blue;
        transition: 0.5s ease-in-out;
    }
    button:hover::before {
        left: -100%;
    }
</style>

示例

完整代码 − 它是上述两个代码部分的组合。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Text Reveal Effect for Buttons</title>
      <style>
         button {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 20px;
            padding: 15px;
         }
         button::before {
            content: "";
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background: blue;
            transition: 0.5s ease-in-out;
         }
         button:hover::before {
            left: -100%;
         }
      </style>
   </head>
   <body>
      <button>Text Reveal</button>
   </body>
</html>

支持的浏览器 - 支持pointer-events属性的浏览器如下所示 –