css美化button按钮

/* 美化button按钮的CSS代码 */

button {
    /* 设置按钮的基本样式 */
    background-color: #4CAF50; /* 按钮背景颜色 */
    color: white; /* 文字颜色 */
    padding: 15px 32px; /* 内边距，控制按钮大小 */
    text-align: center; /* 文字居中 */
    text-decoration: none; /* 去掉下划线 */
    display: inline-block; /* 行内块元素 */
    font-size: 16px; /* 字体大小 */
    margin: 4px 2px; /* 外边距 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    border: none; /* 去掉边框 */
    border-radius: 8px; /* 圆角 */
    transition-duration: 0.4s; /* 过渡效果 */
}

button:hover {
    /* 鼠标悬停时的样式 */
    background-color: white; /* 背景颜色变为白色 */
    color: black; /* 文字颜色变为黑色 */
    border: 2px solid #4CAF50; /* 添加绿色边框 */
}

button:active {
    /* 按钮被点击时的样式 */
    background-color: #45a049; /* 更深的绿色背景 */
    transform: translateY(2px); /* 向下移动一点，模拟按下效果 */
}

解释说明：

• background-color: 设置按钮的背景颜色。

• color: 设置按钮的文字颜色。

• padding: 控制按钮的内边距，从而调整按钮的大小。

• text-align: 文字居中对齐。

• text-decoration: 去掉默认的下划线。

• display: 设置为行内块元素，使按钮可以与其他元素并排显示。

• font-size: 设置按钮文字的字体大小。

• margin: 设置按钮的外边距，控制按钮之间的间距。

• cursor: 设置鼠标悬停时的指针样式为手型。

• border: 去掉默认的边框。

• border-radius: 设置圆角，使按钮看起来更圆润。

• transition-duration: 设置过渡效果的时间，使按钮在状态变化时有平滑的动画效果。

• button:hover: 当鼠标悬停在按钮上时，改变按钮的背景颜色、文字颜色和边框样式。

• button:active: 当按钮被点击时，改变背景颜色并添加一个向下移动的效果，模拟按下按钮的感觉。