写一个置顶按钮,按钮要求如下形状为正方形整体是黑色的中间可点击处为白色,位于页面左下方
时间: 2024-03-03 13:48:09 浏览: 24
好的,以下是一个简单的置顶按钮的HTML和CSS代码,你可以将其添加到你的网页中,然后根据需要进行修改:
HTML代码:
```
<div class="sticky-btn">
<a href="#" class="btn"></a>
</div>
```
CSS代码:
```
.sticky-btn {
position: fixed;
bottom: 20px;
left: 20px;
width: 50px;
height: 50px;
}
.btn {
display: block;
width: 30px;
height: 30px;
background-color: white;
border-radius: 50%;
margin: 10px;
}
.btn:before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 26px 15px;
border-color: transparent transparent #000 transparent;
position: absolute;
top: -26px;
left: 0;
}
.btn:hover {
background-color: #ccc;
cursor: pointer;
}
```
这个按钮使用了一个黑色的正方形的div作为容器,内部包含一个白色的圆形按钮,通过伪元素:before来创建了一个三角形箭头,用来表示置顶的方向。当鼠标悬停在按钮上时,按钮会变为灰色并显示手型光标。