CSS技巧专栏：一日一例 1.纯CSS实现 会讨好的热情按钮 特效

/* 热情按钮样式 */
.btn-passion {
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    background-color: #E85E6B;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
 
/* 按钮悬停状态 */
.btn-passion:hover {
    background-color: #D9394D;
}
 
/* 按钮活跃状态 */
.btn-passion:active {
    background-color: #D9394D;
    box-shadow: 0 5px #888888;
    transform: translateY(4px);
}
 
/* 按钮禁用状态 */
.btn-passion.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

这段代码展示了如何使用CSS创建一个热情按钮，包括正常状态、悬停状态、激活状态和禁用状态的样式。通过使用CSS的类选择器和伪类，可以为按钮的不同状态定义不同的视觉效果，增强了用户界面的交互感。