CSS 圖片制作按鈕坐標是一種非常實用的技巧，它可以讓我們在網頁中輕松地添加、定位和美化按鈕。具體來說，我們可以通過 CSS 中的 position 屬性和 top/left 或者 bottom/right 值來設定按鈕的位置和坐標。

下面是一個示例代碼，用于讓大家更好地理解制作按鈕坐標的過程：

/* 按鈕樣式 */
.button {
position: relative;
display: inline-block;
padding: 15px 30px;
background-color: #007bff;
color: #fff;
font-size: 18px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
/* 圖片 */
.button:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("button-icon.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 50%;
opacity: 0.7;
z-index: -1;
}
/* 懸停狀態 */
.button:hover:before {
opacity: 1;
}

在上面的代碼中，我們首先定義了一個 .button 樣式，該樣式設定了按鈕的大小、顏色、字體等屬性。接下來，我們使用了 :before 偽元素來添加了一個背景圖片，該圖片通過 position: absolute 和 top/left 值被放置在了按鈕的上方，而 z-index 屬性則用于調整圖片和按鈕之間的層次關系。

通過這種方式，我們可以更加靈活地控制按鈕的樣式，而且可以使用任意圖片來美化我們的按鈕。此外，我們還可以使用 :hover 狀態來為按鈕添加鼠標懸停效果，使我們的頁面更加生動和有趣。