How to Create Text Reveal Effect for Buttons using HTML and CSS?

王林转载: 2023-08-19 12:17:13 938浏览

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

Buttons are the most important user interface component for any website. It is very important to design the buttons in a creatively unique way. The text-reveal effect for a button is used when it is used to reveal some offer or exciting content for enhancing the user experience.

The approach is to cover the button with a strip of the same dimension as of button and then moving it in any one direction on mouse-hover.

To move forward with the approach mentioned we need to know about two selectors before and hover which will be used for the text reveal effect for the button approach with the css properties.

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

语法

以下是before选择器的语法 -

element ::before{
   content:
}

:hover选择器是用于在鼠标悬停在元素上时对其进行样式设置的CSS伪类。它可以应用于任何元素，在鼠标悬停在元素上时选择该元素。

语法

以下是before选择器的语法 -

element :hover{	
   // CSS declarations;
}

The following HTML code snippet implements the creation of a simple button using the button tag.

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 Code −

The following are the steps for implementing the CSS code −

Step 1 − Apply some basic styling to the button like adding padding and border-radius to have rounded corners.

Step 2 − Now use the before selector to create a strip of the same dimension to cover the whole button.

Step 3 − Now use the hover selector to move the strip to any one direction as it is moved to the left in the example.

Note − You can move the strip to any direction according to your need. Also, you can use some other properties to tweak the effect according to you.

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>

Example

的中文翻译为：

示例

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

<!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>

Supported Browsers − The browsers supported by pointer-events Property are listed below −