在CSS3中,可以使用偽類:active
來實現按鈕點擊效果。以下是一個簡單的示例:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Button Click Effect</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="btn">Click me</button>
</body>
</html>
CSS (styles.css):
.btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
transition-duration: 0.4s;
}
.btn:active {
background-color: #45a049;
}
在這個示例中,我們創建了一個名為.btn
的按鈕。當用戶點擊按鈕時,:active
偽類會使按鈕的背景顏色從#4CAF50
變為#45a049
,從而產生點擊效果。transition-duration
屬性用于設置顏色變化的持續時間。