如何使用 HTML 和 CSS 為按鈕建立文字顯示效果？-css教學-PHP中文網

首頁

web前端

css教學

如何使用 HTML 和 CSS 為按鈕建立文字顯示效果？

王林

Aug 19, 2023 pm 12:17 PM

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

在本文中，我們將討論使用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 unique way。 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 −