CSS是一種前端標記語言，用于美化網頁。有時候我們需要使用圖片來替代文字按鈕，這時候CSS圖片當按鈕就非常有用。

.btn {
display: inline-block;
background-image: url("button.png");
width: 100px;
height: 50px;
text-indent: -9999px;
border: none;
}
.btn:hover {
background-position: 0 -50px;
}

以上代碼就是使用CSS圖片來做按鈕的例子。我們先給.btn設置了background-image屬性，并指定為我們想要顯示的圖片。然后設置了按鈕的寬度和高度，以及text-indent屬性，將按鈕中的文本縮小到看不見，因為我們要的是圖片按鈕，不需要文本。最后將邊框設為none，消除按鈕的默認邊框。

接著我們給按鈕設置了一個:hover偽類，當鼠標懸停在按鈕上時觸發。注意到我們改變的是background-position屬性。這就是當鼠標懸停時圖片發生了位移。通過這種方式，我們可以達到按鈕動態效果的目的。

CSS圖片按鈕減少了代碼量，還能實現豐富的動態效果，使用場景非常廣泛。