1:现代渐变按钮
.count {
width: 800px;
background: linear-gradient(135deg, #72EDF2 0%, #5151E5 100%);
padding: 12px 24px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(81, 81, 229, 0.3);
color: white;
font-weight: bold;
border: none;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.count:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(81, 81, 229, 0.4);
}
2:磨砂玻璃效果(适合现代UI)
.count {
width: 800px;
background: rgba(135, 206, 235, 0.7);
backdrop-filter: blur(10px);
padding: 15px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #333;
transition: all 0.3s ease;
}
.count:hover {
background: rgba(135, 206, 235, 0.9);
}
3:3D立体按钮
.count {
width: 800px;
background-color: #4CAF50;
padding: 15px;
border-radius: 10px;
box-shadow: 0 5px 0 #3e8e41,
0 10px 10px rgba(0, 0, 0, 0.1);
color: white;
font-weight: bold;
text-align: center;
cursor: pointer;
transition: all 0.1s ease;
position: relative;
top: 0;
}
.count:active {
top: 5px;
box-shadow: 0 2px 0 #3e8e41,
0 5px 5px rgba(0, 0, 0, 0.1);
}
4: 简约边框样式
.count {
width: 800px;
background-color: transparent;
padding: 15px;
border-radius: 10px;
border: 2px solid skyblue;
color: skyblue;
font-weight: bold;
text-align: center;
transition: all 0.3s ease;
}
.count:hover {
background-color: skyblue;
color: white;
box-shadow: 0 0 15px rgba(135, 206, 235, 0.5);
}
5: 霓虹发光效果
.count {
width: 800px;
background-color: #1e1e2f;
padding: 15px;
border-radius: 10px;
border: 2px solid #00ffff;
color: #00ffff;
text-align: center;
box-shadow: 0 0 10px #00ffff,
inset 0 0 10px #00ffff;
text-shadow: 0 0 5px #00ffff;
transition: all 0.3s ease;
}
.count:hover {
box-shadow: 0 0 20px #00ffff,
inset 0 0 15px #00ffff;
}
6:圆角卡片样式
.count {
width: 800px;
background-color: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: none;
}
.count:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
7:常用div简约
.count {
background-color: skyblue;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
}