你可以透過CSS的hover和active狀態來實現這個效果。以下是一個簡單的範例程式碼,可以讓按鈕在滑鼠懸停時放大,並在點擊時縮小:
HTML:
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>CSS按鈕效果</title>
</head>
<body>
<button class="custom-button">按我</button>
</body>
</html>
CSS (styles.css):
.custom-button {
padding: 10px 20px;
font-size: 16px;
background-color: #3498db;
color: #fff;
border: none;
cursor: pointer;
transition: transform 0.3s ease;
}
.custom-button:hover {
transform: scale(1.1);
}
.custom-button:active {
transform: scale(0.9);
}
這段程式碼中,我們創建了一個自訂的按鈕樣式.custom-button
。在hover狀態下,我們使用了transform
屬性來放大按鈕,並在active狀態下使用transform
來縮小按鈕。
你可以根據需要調整按鈕的樣式和動畫效果。希望這能對你有所幫助!如果有其他問題,歡迎隨時問我。