css分享 | 常用按钮效果记录（关注追加）

/* 关注按钮 */
.btn-follow {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    font-size: 14px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
 
/* 已关注按钮 */
.btn-followed {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    font-size: 14px;
    color: #fff;
    background-color: #6c757d;
    border: none;
    border-radius: 5px;
    cursor: not-allowed;
}
 
/* 关注按钮：悬停状态 */
.btn-follow:hover {
    background-color: #0056b3;
}
 
/* 已关注按钮：悬停状态 */
.btn-followed:hover {
    background-color: #545b62;
}

这段代码定义了两组按钮样式，一组用于用户未关注时展示的关注按钮，另一组用于用户已关注时展示的已关注按钮。按钮在悬停时有不同的背景色变化，增加了用户交互的视觉反馈。按钮的样式可以根据实际项目需求进行调整和增强。