CSS作為前端開發中不可或缺的一部分，其最重要的功能之一是美化網站，使其與眾不同。其中，按鈕在網站界面中扮演著重要的角色。在設計按鈕時，我們會考慮其樣式、大小、形狀等，但按鈕字體的顏色也是很重要的一個因素。本文將介紹如何使用CSS使按鈕字體變色。

/* 定義按鈕樣式 */
button {
background-color: #4CAF50; /* 綠色背景 */
color: white; /* 白色字體 */
padding: 16px 32px; /* 左右內邊距 */
text-align: center; /* 文字居中 */
font-size: 16px; /* 字體大小 */
border: none; /* 無邊框 */
border-radius: 8px; /* 圓角 */
cursor: pointer; /* 鼠標樣式 */
}
/* 定義鼠標懸停時的樣式 */
button:hover {
background-color: white;
color: #4CAF50;
border: 2px solid #4CAF50;
}
/* 定義按鈕背景色為紅色時，字體顏色為白色 */
button.is-danger {
background-color: #E71D36; /* 紅色背景 */
color: white; /* 白色字體 */
}
/* 定義按鈕字體顏色隨機改變的動畫效果 */
@keyframes color-change {
0% {color: red;}
50% {color: yellow;}
100% {color: blue;}
}
/* 給類名為“change-color”的按鈕添加動畫效果 */
button.change-color {
animation: color-change 5s infinite;
}

上面的CSS代碼定義了一些基礎的按鈕樣式，并通過:hover屬性實現了鼠標懸停時的變化。其中，類名為"is-danger"的按鈕顏色為紅色，字體顏色為白色。而類名為"change-color"的按鈕則添加了按一定規律改變字體顏色的動畫效果。

要使用這些效果，只需要在HTML中給按鈕添加相應的類名即可：

<button>Normal Button</button>
<button class="is-danger">Danger Button</button>
<button class="change-color">Color-changing Button</button>

使用CSS可以實現按鈕字體顏色的改變，從而使按鈕更加美觀優雅，增強網站的可讀性和吸引力。