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