程式碼解讀 定義 dom，容器是一個無序列表，列表項代表按鈕：

• home

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 中再增加幾個按鈕：

• home
• products
• services
• contact

ul { display: flex; flex-direction: column; align-items: center; }

ul li { margin: 0.5em; } 大功告成！