在前端開發中，圖片按鈕是非常常見的元素。使用 CSS 可以輕松地實現這種效果，下面是一個簡單的 CSS 圖片按鈕代碼：

/* 圖片按鈕容器 */
.btn {
display: inline-block;
position: relative;
border: none;
background: none;
outline: none;
cursor: pointer;
}
/* 圖片樣式 */
.btn img {
display: block;
max-width: 100%;
height: auto;
vertical-align: middle;
}
/* 按鈕遮罩 */
.btn:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
/* 鼠標懸停狀態 */
.btn:hover:before {
opacity: 1;
}
/* 點擊效果 */
.btn:active:before {
background-color: rgba(0,0,0,0.5);
}

以上代碼中，.btn是按鈕容器的樣式，.btn img是圖片樣式，.btn:before是按鈕遮罩效果的樣式。其中，:hover和:active偽類選擇器用來控制鼠標懸停和點擊時的按鈕效果。

使用示例：

<button class="btn">
<img src="button-image.jpg" alt="Button">
</button>

以上是一個簡單的 CSS 圖片按鈕代碼，通過上述代碼的實現方式，可以輕松地為網頁中的圖片添加酷炫效果，提高用戶體驗。