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

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

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

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

为了推进上述方法，我们需要了解两个选择器 before 和 hover，它们将用于按钮文字揭示效果，并使用 css 属性。

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

语法

以下是 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 - 对按钮应用一些基本样式，例如添加填充和 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>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例

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

Open Compiler
<!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 属性支持的浏览器：

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 11.0
  • Firefox 1.5
  • Opera 9.0
  • Safari 4.0

注意 - Opera 4-6 使用单冒号支持。(::before)。

本文重点介绍了如何使用 before 和 CSS 选择器使用 HTML 和 CSS 创建按钮文字揭示效果。

更新于：2022年12月12日

2K+ 次浏览

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告