css3制作个性按钮

CSS3制作个性按钮非常容易，通过设置不同的样式和属性，可以轻松地创建出各种不同外观的按钮。

.button {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    background-color: #ff0000;
    border: 1px solid #ff0000;
    border-radius: 5px;
    padding: 10px 20px;
    box-shadow: 0 5px #b10000;
}
.button:hover {
    background-color: #b10000;
    border-color: #b10000;
    box-shadow: 0 5px #700000;
}
.button:active {
    background-color: #700000;
    border-color: #700000;
    box-shadow: none;
    transform: translateY(5px);
}

上面的代码展示了一个基本的按钮样式，包括了背景色、边框、文字颜色等属性。在:hover和:active状态下，通过修改背景色和边框颜色以及添加动画效果，使得按钮更加生动有趣。

还可以通过添加渐变效果、背景图片等属性，创造出更加独特的按钮样式。例如：

.gradient-button {
    background-image: linear-gradient(#ff0000, #b10000);
    color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    box-shadow: 0 5px #b10000;
}
.image-button {
    background-image: url(btn-image.png);
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    box-shadow: 0 5px #b10000;
}
    

以上代码展示了两种不同的按钮样式，一种是使用渐变效果，一种是使用背景图片。通过使用不同的样式和属性，可以轻松地创造出各种不同外观的按钮。

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