css按钮

/* CSS 按钮样式示例 */

.button {
    /* 设置按钮的背景颜色 */
    background-color: #4CAF50;

    /* 设置按钮的文字颜色 */
    color: white;

    /* 去除按钮默认的边框样式 */
    border: none;

    /* 设置按钮的内边距，使按钮内容和边缘有一定距离 */
    padding: 15px 32px;

    /* 设置按钮的文本大小 */
    font-size: 16px;

    /* 设置按钮的圆角 */
    border-radius: 8px;

    /* 鼠标悬停时改变按钮的背景颜色 */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;
}

解释说明：

• .button 类用于定义按钮的基本样式，包括背景颜色、文字颜色、内边距、字体大小和圆角等。
• border: none; 移除了按钮默认的边框样式，使其看起来更简洁。
• transition-duration: 0.4s; 使得鼠标悬停时的样式变化有一个平滑的过渡效果。
• .button:hover 定义了当鼠标悬停在按钮上时的样式变化，例如背景颜色变为白色，文字颜色变为黑色，并添加一个绿色的边框。