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 下劃線按鈕樣式，其實現原理也相對較為明朗，可以根據需求進行修改和調整。