效果預覽

在線演示

按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。

https://codepen.io/comehope/pen/yRyOZr

可交互視頻

此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。

請用 chrome, safari, edge 打開觀看。

https://scrimba.com/p/pEgDAM/cmWMQtz

源代碼下載

本地下載

每日前端實戰系列的全部源代碼請從 github 下載：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，容器是一個無序列表，列表項代表按鈕：

<ul><li>home</li> </ul>

居中顯示：

body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background: linear-gradient(deepskyblue, navy); }

去掉列表項前面的符號：

ul {padding: 0;list-style-type: none; }

設置按鈕的文字樣式：

ul li {color: #ddd;font-size: 25px;font-family: sans-serif;text-transform: uppercase; }

用偽元素在按鈕的左側增加一個方塊：

ul li {position: relative; }ul li::before {content: '';position: absolute;width: 100%;height: 100%;background: tomato;left: -100%; }

用偽元素在按鈕的右側增加一條下劃線：

ul li::after {content: '';position: absolute;width: 100%;height: 0.2em;background: tomato;bottom: 0;left: 100%; }

接下來設置鼠標懸停效果。
當鼠標懸停時，左側的方塊移到文字所在位置：

ul li::before {transition: 0.4s ease-out; }ul li:hover::before {left: 100%; }

右側的下劃線移到文字所在位置，它的動畫時間延遲到方塊的動畫快結束時再開始：

ul li::after {transition: 0.3s 0.3s ease-out; }ul li:hover::after {left: 0%; }

同時，提高文字的亮度：

ul li {transition: 0.3s;cursor: pointer; }ul li:hover {color: #fff; }

隱藏掉按鈕外的部分，使方塊和下劃線在默認狀態下都不可見，只有鼠標懸停時它們才從兩側入場：

ul li {overflow: hidden; }

最后，在 dom 中再增加幾個按鈕：

<ul><li>home</li><li>products</li><li>services</li><li>contact</li> </ul>

布局多個按鈕：

ul {display: flex;flex-direction: column;align-items: center; }ul li {margin: 0.5em; }

大功告成！

原文地址：https://segmentfault.com/a/1190000016561226

總結

以上是生活随笔為你收集整理的如何用纯 CSS 创作从按钮两侧滑入装饰元素的悬停特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。