css3做按钮

CSS3作为前端开发中重要的技术，为我们带来了许多优美的效果。其中，制作按钮是前端开发中常见的一项任务。下面，本文将介绍如何使用CSS3来实现不同风格的按钮。

1. 线框按钮

.btn {
    border: 2px solid #333;
    border-radius: 5px;
    padding: 10px 20px;
    background-color: transparent;
    transition: all .3s;
}
.btn:hover {
    background-color: #333;
    color: #fff;
}

2. 填充按钮

.btn {
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    transition: all .3s;
}
.btn:hover {
    background-color: #fff;
    color: #333;
    border: 2px solid #333;
}

3. 渐变按钮

.btn {
    background: linear-gradient(to right, #333, #666);
    color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    transition: all .3s;
}
.btn:hover {
    background: linear-gradient(to right, #666, #333);
    color: #fff;
}
    

以上就是三种常见的按钮样式。通过简单的CSS3代码，我们可以实现各种不同风格的按钮。在实际开发中，可以根据需求来选择不同的样式，让网站更加美观和专业。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！