資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 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>
示例
完整程式碼 - 它是上述兩部分程式碼的組合。
<!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 建立按鈕文字揭示效果。
2K+ 次瀏覽
