#css 按鈕動態效果
動態效果是 CSS 按鈕的常見應用之一。通過使用 JavaScript 和 jQuery 等庫，可以更改按鈕的樣式和響應式行為，使其在不同設備和瀏覽器上具有不同的外觀和行為。以下是一個簡單的例子，演示如何使用 CSS 和 JavaScript 創建動態效果的 CSS 按鈕。
## 創建動態效果的 CSS 按鈕
以下是一個使用 CSS 和 JavaScript 創建動態效果的 CSS 按鈕示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>動態效果的 CSS 按鈕</title>
<style>
input[type="button"] {
background-color: #f44336;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
</style>
</head>
<body>
<input type="button" id="myButton" value="點擊我">
<script>
document.getElementById("myButton").addEventListener("click", function() {
// 更改按鈕樣式
document.getElementById("myButton").style.backgroundColor = "#909090";
document.getElementById("myButton").style.border = "2px solid #ddd";
document.getElementById("myButton").style.padding = "10px 20px";
// 更改按鈕響應式行為
document.getElementById("myButton").style.cursor = " pointer";
});
</script>
</body>
</html>
在這個例子中，我們創建了一個輸入框和一個按鈕。我們使用 CSS 樣式更改按鈕的背景色、邊框和內邊距，并使用 JavaScript 添加一個點擊事件監聽器，以便在按鈕被點擊時更改樣式和響應式行為。
## 總結