用css写一个炫酷的登录按钮
时间: 2023-03-27 15:00:53 浏览: 93
当然可以!以下是一个用 CSS 制作的炫酷登录按钮的示例代码:
```html
<button class="btn btn-1">登录</button>
```
```css
.btn {
font-size: 16px;
color: #fff;
text-transform: uppercase;
text-decoration: none;
background: #6C63FF;
padding: 10px 20px;
border-radius: 5px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
cursor: pointer;
margin: 5px;
}
.btn:hover {
background: #483D8B;
letter-spacing: 1px;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}
```
在这个示例中,我们创建了一个带有“登录”文本的按钮。该按钮有一个默认样式 `.btn`,它定义了字体大小、颜色、背景、填充、边框、边框半径、光标类型和过渡效果等属性。此外,我们定义了一个悬停状态 `.btn:hover`,当鼠标指针悬停在按钮上时,背景颜色会变成紫罗兰色,并添加阴影和字母间距的过渡效果,使按钮看起来更加炫酷。
您可以根据自己的需求进行更改和自定义,创建出更加炫酷的登录按钮。
相关推荐
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)