資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 CSS 為按鈕點選新增按下效果
為了允許使用者與網站或應用程式互動，按鈕是網頁設計中必不可少的元件。透過使用 CSS 為按鈕新增視覺上美觀和創新的點選效果，可以極大地改善使用者體驗並使互動更加有趣。
可以使用 CSS 中的 active 偽類為按鈕點選建立按下效果。此樣式透過定義按鈕在被點選時的外觀來提供視覺反饋。在深入瞭解它之前，讓我們快速瞭解一下 HTML 中的按鈕。
HTML 按鈕
在 HTML 中，可點選按鈕由<button> 標籤定義。我們可以在 <button> 標籤內使用文字和影像。預設的 <button> 型別在不同的瀏覽器中有所不同，並且用於提交內容。我們可以使用 CSS 工具來設定按鈕的樣式。
語法
以下是 HTML 按鈕的語法
<button>....</button>
示例
讓我們看一下下面的示例，我們將建立一個按鈕並應用 CSS 樣式。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #34495E;
text-align: center;
}
button {
margin: 150px;
position: relative;
overflow: hidden;
padding: 10px 40px;
font-size: 30px;
font-family: verdana;
background-color: transparent;
border: none;
color: #DE3163;
transition: 0.3s;
&::before {
content: '';
height: 3px;
width: 0;
left: 0;
bottom: 0;
position: absolute;
background: #E8DAEF;
transition: 0.4s;
}
&:hover {
&::before {
width: 100%;
}
}
}
span.y {
background-color: #D5F5E3;
border-radius: 100%;
position: absolute;
transform: scale(0);
animation: y .4s linear forwards;
}
@keyframes y {
to {
transform: scale(1);
opacity: 0;
}
}
</style>
</head>
<body>
<div>
<button class="tp">CLICK ME</button>
</div>
<script>
var button = document.querySelectorAll('.tp');
Array.prototype.forEach.call(button, function(a) {
a.addEventListener('click', ripple)
});
function ripple(event) {
var x = document.createElement('span');
x.classList.add('y');
var max = Math.max(this.offsetWidth, this.offsetHeight);
x.style.width = x.style.height = max * 2 + 'px';
var rect = this.getBoundingClientRect();
x.style.left = event.clientX - rect.left - max + 'px';
x.style.top = event.clientY - rect.top - max + 'px';
this.appendChild(x);
}
</script>
</body>
</html>
當我們執行以上程式碼時，它將在網頁上生成一個包含點選按鈕的輸出。當用戶嘗試點選按鈕時，它會顯示由 CSS 生成的效果。
示例
再考慮另一個示例，我們將為按鈕懸停新增星號。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #D5F5E3;
text-align: center;
}
.tp {
border-radius: 10px;
background-color: #D2B4DE;
border: none;
color: #DE3163;
font-size: 30px;
font-family: verdana;
padding: 10px;
width: 150px;
cursor: pointer;
margin: 50px;
}
.tp span {
position: relative;
transition: 0.3s;
}
.tp span:after {
content: '\2042';
position: absolute;
opacity: 0;
top: -3px;
right: -25px;
transition: 0.5s;
}
.tp:hover span {
padding-right: 30px;
}
.tp:hover span:after {
opacity: 2;
right: 1px;
}
</style>
</head>
<body>
<button class="tp">
<span>CLICK</span>
</button>
</body>
</html>
執行以上程式碼後，輸出視窗將彈出，在網頁上顯示應用了 CSS 的按鈕。當用戶嘗試將滑鼠懸停在星號上時。
示例
在以下示例中，我們將使用 CSS 為按鈕建立一個簡單的按下效果。
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: orange;
color: white;
border: none;
border-radius: 7px;
box-shadow: 0 5px #999;
display: inline-block;
padding: 10px;
font-size: 16px;
cursor: pointer;
text-align: center;
outline: none;
}
.button:hover {
background-color: blue;
}
.button:active {
background-color: orange;
box-shadow: 0 5px gray;
transform: translateY(2px);
}
</style>
</head>
<body>
<button class="button">Result</button>
</body>
</html>
當我們執行以上程式碼時，它將在網頁上生成一個包含應用了 CSS 的按下效果的輸出。
更新於: 2024-01-08
2K+ 瀏覽量
廣告