淘先锋技术网

首页 1 2 3 4 5 6 7

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;
}

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