button好看的样式
时间: 2023-09-01 17:10:29 浏览: 49
以下是几种常见的button样式供参考:
1. 圆角按钮:
```
button {
border-radius: 20px;
padding: 10px 20px;
font-size: 16px;
background-color: #f1c40f;
color: #fff;
border: none;
}
```
2. 扁平按钮:
```
button {
padding: 10px 20px;
font-size: 16px;
background-color: #fff;
color: #3498db;
border: 2px solid #3498db;
border-radius: 5px;
}
```
3. 悬浮按钮:
```
button {
padding: 10px 20px;
font-size: 16px;
background-color: #3498db;
color: #fff;
border: none;
box-shadow: 0 5px 0 #2980b9;
}
button:hover {
top: 2px;
box-shadow: none;
}
```
4. 渐变按钮:
```
button {
padding: 10px 20px;
font-size: 16px;
background-image: linear-gradient(to bottom right, #3498db, #2980b9);
color: #fff;
border: none;
border-radius: 5px;
}
```
你可以根据项目需要自定义样式,这里提供的只是一些基础的样式参考。