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

cssweb developmentfront end technology更新于 2024/8/3 11:56:17

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

按钮是任何网站最重要的用户界面组件。以富有创意的独特方式设计按钮至关重要。按钮的文本显示效果用于显示一些优惠或精彩内容，以增强用户体验。

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

为了进一步理解上述方法，我们需要了解两个选择器:before 和 hover，它们将与 CSS 属性一起用于按钮方法的文本显示效果。

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

语法

以下是 before 选择器的语法 -

element ::before{
    content:
}

:hover 选择器 CSS 伪类用于在鼠标悬停在元素上时设置元素样式。它可以用于任何鼠标悬停时会选中元素的元素。

语法

以下是 before 选择器的语法 -

element :hover{
    // CSS 声明;
}

以下 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 − 现在使用悬停选择器将条带移动到任意方向，就像示例中向左移动一样。

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

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 属性支持的浏览器列表如下 −