CSS 走馬燈按鈕是一種非常有用的效果，它可以讓網站的頁面更加充滿動感和活力。如果您希望在自己的網站上添加一個 CSS 走馬燈按鈕，那么可以跟隨以下步驟來實現。

.button {
position: relative;
display: inline-block;
overflow: hidden;
padding: 0;
margin: 0;
width: 100px;
height: 30px;
border: none;
outline: none;
border-radius: 15px;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 30px;
background-color: #03a9f4;
cursor: pointer;
}
.button:hover .text {
left: -100%;
animation: slide-right 2s linear infinite;
}
.text {
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #fff;
text-transform: uppercase;
}
@keyframes slide-right {
0% {
left: -100%;
}
100% {
left: 0;
}
}

首先，您需要創建一個帶有類名為“button”的按鈕元素。接下來，使用 CSS 的“position”屬性將按鈕設置為相對定位，并將“display”設置為“inline-block”以確保按鈕與其上下文保持在同一行內。此外，設置“overflow”為“hidden”，可以隱藏文本內容的任何部分。

我們還對按鈕進行了樣式設置，比如設置了按鈕的“width”和“height”，“border-radius”屬性可以創建圓角或圓形形狀。設置了文本的字體樣式和顏色，以及文本所在背景的顏色等。

然后，我們創建了一個子元素，即類名為“text”的元素，并將其設置為絕對定位。文本元素的“top”和“left”都被設置為“0”，這樣它就被放置在按鈕的左上角。

最后，在按鈕的:hover偽類選擇器中，我們設置了“left”屬性為“-100%”。這會將文本從按鈕的中心移動到其最左邊。還使用“animation”屬性，設置了動畫的名稱、持續時間和動畫函數等，而“infinite”屬性為無限循環。

代碼如上述所示，代碼封裝好，可以在需要的地方使用。