HTML5圓形懸浮按鈕代碼是網頁開發中常用的設計元素之一。下面是一個基本的HTML5圓形懸浮按鈕代碼,可以自定義其大小、顏色、圖標等。
<style>
.button {
display: inline-block;
position: fixed;
bottom: 20px;
right: 20px;
background-color: #007F5F;
border: none;
border-radius: 50%;
color: #fff;
font-size: 24px;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
}
.button:hover {
background-color: #009a6b;
}
</style>
<div class="button">
<i class="fa fa-plus-circle"></i>
</div>
首先,在style標簽內設置button類的樣式,包括設置按鈕為display:inline-block,使其在同一行內,而不是換行;position:fixed,使其懸浮在頁面,不隨滾動條滾動;bottom和right屬性控制按鈕距離底部和右側的距離;background-color設置按鈕的背景色;border:none去除按鈕的邊框;border-radius設置按鈕為圓形;color設置按鈕文字的顏色;font-size設置按鈕文字的大小;width和height控制按鈕的大小;text-align和line-height屬性控制按鈕文字的對齊方式和垂直方向的距離。
當鼠標懸停在按鈕上時,設置了:hover偽類,改變按鈕的背景顏色,讓按鈕變得更加明顯。
在div標簽內,設置了按鈕的class為button,以便于調用樣式。在div標簽內嵌套了標簽,用于設置按鈕內的圖標。這里使用了Font Awesome庫的圖標,可以根據需要自行替換。