CSS懸浮按鈕是一種非常流行的設(shè)計(jì)風(fēng)格，在網(wǎng)頁設(shè)計(jì)中經(jīng)常被使用。通過CSS樣式，我們可以實(shí)現(xiàn)一個(gè)懸浮按鈕，讓用戶在需要時(shí)可以快速的點(diǎn)擊操作。下面讓我們來看一下CSS懸浮按鈕的實(shí)現(xiàn)方法。
<!DOCTYPE html>
<html>
<head>
<title>CSS懸浮按鈕</title>
<style>
.btn {
display: inline-block;
font-size: 14px;
font-weight: 700;
line-height: 1;
text-align: center;
vertical-align: middle;
padding: 15px 20px;
border-radius: 4px;
background-color: #00a0d4;
color: #ffffff;
box-shadow: 0 4px 6px rgba(0,0,0,.15);
cursor: pointer;
}
.btn:hover {
background-color: #0081ad;
}
.btn.fixed {
display: block;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 999;
}
</style>
</head>
<body>
<a href="#" class="btn fixed">點(diǎn)擊</a>
</body>
</html>在CSS中，我們用.btn類表示按鈕，定義了按鈕的一些樣式，包括字體、字重、行高、文本對(duì)齊、內(nèi)邊距和背景顏色等，通過cursor: pointer;樣式可以將鼠標(biāo)形狀改為手指，使用戶明確該區(qū)域是可點(diǎn)擊的。
當(dāng)鼠標(biāo)懸浮在按鈕上時(shí)，我們通過:hover偽類改變按鈕的背景顏色，從而實(shí)現(xiàn)了一個(gè)懸浮效果。
最后，通過添加fixed類，將按鈕設(shè)置為固定定位，設(shè)置按鈕的位置以及層級(jí)，從而實(shí)現(xiàn)按鈕的懸浮效果。
上一篇mysql接口api
下一篇css懸浮文字