用css写一个炫酷科技按钮
时间: 2023-03-31 22:04:03 浏览: 151
CSS3炫酷按钮
好的,我可以回答这个问题。要写一个炫酷科技按钮,可以使用CSS3的一些特性,比如渐变、阴影、动画等。以下是一个简单的示例代码:
```
<button class="tech-button">科技按钮</button>
<style>
.tech-button {
background: linear-gradient(to bottom, #4d4d4d, #333);
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 16px;
padding: 10px 20px;
text-align: center;
text-shadow: 1px 1px #000;
transition: all .3s ease;
}
.tech-button:hover {
background: linear-gradient(to bottom, #333, #4d4d4d);
box-shadow: 10px #fff;
text-shadow: 1px 1px #fff;
}
</style>
```
这个按钮使用了渐变背景、圆角边框、阴影、文字阴影和鼠标悬停效果。当鼠标悬停在按钮上时,背景颜色和阴影都会发生变化,同时文字阴影也会变成白色。
阅读全文