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可以实现按钮字体颜色的改变，从而使按钮更加美观优雅，增强网站的可读性和吸引力。