CSS3 按钮学习笔记

1. 基础按钮样式

通过设置按钮的 background、color、padding 等属性，可以实现基础的按钮样式。

cssCopy Code
.button {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}

2. 悬停效果

鼠标悬停在按钮上时，可以让按钮的背景色、字体颜色等产生变化，从而提升交互体验。

cssCopy Code
.button:hover {
    background-color: #0056b3;
    color: #fff;
}

3. 点击效果

当用户点击按钮时，可以添加点击效果，让用户感知到操作已经被执行。

cssCopy Code
.button:active {
    background-color: #0056b3;
    color: #fff;
    transform: translateY(1px);
}

4. 禁用效果

在一些情况下，需要禁用按钮，可以通过设置 disabled 属性或者添加 .disabled 类名来实现。

cssCopy Code
.button.disabled {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
}

5. 圆角按钮

通过设置 border-radius 属性，可以实现圆角按钮。

cssCopy Code
.button.rounded {
    border-radius: 50px;
}

6. 渐变按钮

使用 CSS3 渐变可以实现更加炫酷的按钮效果。

cssCopy Code
.button.gradient {
    background-image: linear-gradient(#007bff, #0056b3);
}

7. 按钮大小

通过设置按钮的 font-size 和 padding 属性，可以控制按钮的大小。

cssCopy Code
.button.large {
    font-size: 20px;
    padding: 15px 30px;
}

.button.small {
    font-size: 12px;
    padding: 5px 10px;
}

以上是 CSS3 按钮的一些基础样式和效果示例，可以根据实际需求进行调整和组合。