CSS 下劃線按鈕樣式是 Web 開發中常見的一種樣式效果,下面我們來介紹一些實現思路。
.btn-underline { position: relative; overflow: hidden; display: inline-block; padding-bottom: 5px; border: none; background-color: transparent; color: #333; cursor: pointer; } .btn-underline::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #333; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease; } .btn-underline:hover::after { transform: scaleX(1); transform-origin: left; }
我們創建了一個名為 btn-underline 的類來設定下劃線按鈕的樣式,將其設為相對定位,隱藏溢出部分,并且內部填充底部。同時,去掉了邊框,并設置了透明背景色以避免干擾下劃線效果。最后,將鼠標光標設為指針以提升用戶體驗。
下劃線的實現通過 :after 偽元素,在按鈕的底部插入一個絕對定位的元素,設置其為寬度為 100%,高度為 1px,顏色取決于設計需求。用 transform: scaleX(0) 將其橫向壓縮至沒有長度,并指定 transform-origin 為右側。接下來,在 :hover 事件觸發時,將其橫向拉伸為原來的 100%,同時指定 transform-origin 為左側,實現下劃線動畫效果。
這就是一種簡單易懂的 CSS 下劃線按鈕樣式,其實現原理也相對較為明朗,可以根據需求進行修改和調整。