css制作按钮
基础按钮样式
使用CSS创建一个基础按钮，设置背景色、边框、圆角等基本属性：
.button {
background-color: #4CAF50; /* 绿色背景 */
border: none;
color: white; /* 白色文字 */
padding: 12px 24px; /* 内边距 */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer; /* 鼠标悬停时显示手型 */
border-radius: 4px; /* 圆角 */
}悬停效果
添加鼠标悬停时的状态变化，提升交互体验：
.button:hover {
background-color: #45a049; /* 更深的绿色 */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影 */
}活动状态
定义按钮被点击时的状态：
.button:active {
background-color: #3e8e41;
transform: translateY(1px); /* 轻微下移模拟按压效果 */
}禁用状态
为不可用按钮添加样式：
.button:disabled {
opacity: 0.6;
cursor: not-allowed; /* 禁用光标 */
}按钮组样式
创建水平排列的按钮组：
.button-group {
display: flex;
gap: 8px; /* 按钮间距 */
}
.button-group .button {
flex: 1; /* 等宽按钮 */
}不同风格按钮
通过添加类名创建不同风格的按钮：
/* 主按钮 */
.primary {
background-color: #007bff;
}
.primary:hover {
background-color: #0069d9;
}
/* 危险按钮 */
.danger {
background-color: #dc3545;
}
.danger:hover {
background-color: #c82333;
}
/* 轮廓按钮 */
.outline {
background-color: transparent;
border: 2px solid #4CAF50;
color: #4CAF50;
}图标按钮
创建带图标的按钮：
.icon-button {
padding: 8px 16px 8px 40px;
position: relative;
}
.icon-button::before {
content: "";
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-image: url('icon-path.svg');
background-size: contain;
}动画效果
为按钮添加点击动画：
@keyframes buttonClick {
0% { transform: scale(1); }
50% { transform: scale(0.95); }
100% { transform: scale(1); }
}
.button:active {
animation: buttonClick 0.2s ease;
}响应式按钮
根据不同屏幕尺寸调整按钮大小：
@media (max-width: 600px) {
.button {
padding: 10px 20px;
font-size: 14px;
}
}这些CSS代码片段展示了创建各种按钮样式的方法，可以根据项目需求组合使用或进一步自定义。
