炫酷的button样式
时间: 2023-08-29 21:12:35 浏览: 83
非常炫的按钮样式
以下是一些炫酷的button样式:
1. 渐变背景色:
```css
button {
background: linear-gradient(to right, #ff416c, #ff4b2b);
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease-in-out;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
```
2. 扁平化按钮:
```css
button {
background: transparent;
color: #fff;
border: 2px solid #fff;
padding: 10px 20px;
border-radius: 5px;
transition: all 0.3s ease-in-out;
}
button:hover {
background: #fff;
color: #000;
cursor: pointer;
}
```
3. 图标按钮:
```css
button {
background: #2ecc71;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease-in-out;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
button i {
margin-right: 10px;
}
```
以上是一些简单的button样式,你可以根据自己的需求进行调整和修改。
阅读全文