按钮选择的css好看样式
时间: 2023-10-27 16:02:49 浏览: 52
以下是一些常见的按钮选择的 CSS 样式:
1. 扁平化按钮样式:
```css
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #3e8e41;
}
```
2. 3D 按钮样式:
```css
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
box-shadow: 0 5px #357a38;
}
button:hover {
background-color: #3e8e41;
box-shadow: 0 3px #357a38;
transform: translateY(2px);
}
```
3. 玻璃按钮样式:
```css
button {
background-color: transparent;
color: #fff;
border: 2px solid #fff;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
position: relative;
overflow: hidden;
}
button:hover {
background-color: #fff;
color: #000;
border-color: #000;
}
button:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
transition: width 0.2s ease-out, height 0.2s ease-out;
}
button:hover:before {
width: 500px;
height: 500px;
}
```
4. 渐变按钮样式:
```css
button {
background: linear-gradient(to bottom, #e64c3c, #c0392b);
color: #fff;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
transition: background 0.3s ease-out;
}
button:hover {
background: linear-gradient(to bottom, #c0392b, #e64c3c);
}
```
以上是一些常见的按钮选择的 CSS 样式,可以根据需要进行修改和调整。