CSS中提供了多種懸浮按鈕的實現方式,很多前端工程師也自己開發了相應的插件,供大家使用。接下來,我們將介紹一款基于CSS3的懸浮按鈕插件。
.btn-floating { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background-color: #008CBA; border-radius: 50%; text-align: center; box-shadow: 2px 2px 3px #999; } .btn-floating:hover { background-color: #5CC5F3; cursor: pointer; } .btn-floating i { line-height: 50px; font-size: 24px; color: #fff; }
我們先設置懸浮按鈕的基本樣式,包括position、bottom、right、width、height、background-color、border-radius以及box-shadow等屬性。接著,為了實現鼠標懸浮效果,我們添加了:hover偽類,將背景色進行改變,并添加了鼠標指針樣式。
最后是懸浮按鈕內的圖標樣式。我們通過設置line-height與font-size來調整圖標大小,并設置color屬性為白色,以達到讓圖標與背景色形成鮮明對比的效果。
這款基于CSS3的懸浮按鈕插件具有簡單、易用、美觀等特點。通過修改不同的屬性或結合其他CSS樣式,可以實現多種不同樣式的懸浮按鈕。推薦大家在實際開發中使用此插件,既能提高開發效率,也能為網站帶來不錯的視覺效果。
上一篇css懸浮固定代碼生成器
下一篇css懸浮樣式四種