網頁 CSS 按鈕動畫效果是一種通過 CSS 樣式實現按鈕的動畫效果，可以讓按鈕在點擊時產生不同的形狀和動作。下面將詳細介紹一下如何使用 CSS 實現按鈕動畫效果。

1. 創建按鈕元素

在 HTML 代碼中，我們可以創建一個按鈕元素，例如：

```html

<button id="myButton">點擊我</button>

其中，`id` 屬性為該元素的唯一標識符，`myButton` 是我們要創建的按鈕元素的名稱。

2. 添加 CSS 樣式

在 CSS 樣式中，我們可以為按鈕元素添加一些基本的樣式，例如：

```css

#myButton {

background-color: #007bff;

color: #fff;

padding: 10px;

border: none;

border-radius: 5px;

cursor: pointer;

這里我們使用了基本的灰色按鈕樣式，同時添加了一些基本的邊框和背景顏色，以及按鈕的指針樣式。

3. 添加動畫效果

為了添加動畫效果，我們需要使用 CSS 的 `@keyframes` 規則。我們可以為按鈕元素添加一個動畫，例如：

```css

#myButton {

background-color: #007bff;

color: #fff;

padding: 10px;

border: none;

border-radius: 5px;

cursor: pointer;

animation: spin 1s linear infinite;

@keyframes spin {

0% {

transform: rotate(0deg);

100% {

transform: rotate(360deg);

這里我們為按鈕元素添加了一個旋轉 360 度的動畫效果。當按鈕被點擊時，我們將動畫效果的時間設置為 1 秒，使其持續整個點擊過程。

4. 測試動畫效果

最后，我們可以在瀏覽器中測試我們的 CSS 按鈕動畫效果。在瀏覽器中打開我們的網頁，點擊按鈕，觀察按鈕的動畫效果。

通過使用 CSS 按鈕動畫效果，我們可以創建美觀且交互性強的按鈕，讓網頁更加生動有趣。