16款css按钮图解

16款CSS按钮图解

.button {
border: none;
border-radius: 4px;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #0077cc;
}
.button:hover {
background-color: #005fa3;
}
.button:active {
background-color: #004d80;
}
.button:focus {
outline: none;
}
.btn-primary {
background-color: #0077cc;
}
.btn-primary:hover {
background-color: #005fa3;
}
.btn-primary:active {
background-color: #004d80;
}
.btn-secondary {
background-color: #6c757d;
}
.btn-secondary:hover {
background-color: #5a6268;
}
.btn-secondary:active {
background-color: #474f54;
}
.btn-success {
background-color: #28a745;
}
.btn-success:hover {
background-color: #218838;
}
.btn-success:active {
background-color: #1e7e34;
}
.btn-danger {
background-color: #dc3545;
}
.btn-danger:hover {
background-color: #c82333;
}
.btn-danger:active {
background-color: #bd2130;
}

上述代码展示了16款使用CSS制作的按钮，其中包括基础样式的.button，以及.btn-primary、.btn-secondary、.btn-success、.btn-danger四个预设样式。

基础样式的.button除了普通状态外，还设定了hover、active、focus状态的颜色变化效果，并设置了圆角和内边距。不同预设样式的按钮则仅仅在颜色上有所区别。

通过使用这些预设样式，可以快速搭建出符合视觉风格和功能需求的按钮。

查看更多关于16款css按钮图解的详细内容...