網站中的按鈕是非常關鍵的，它有助于用戶交互，提高網站的易用性和視覺感受。使用CSS和圖片可以創建出各種各樣的按鈕效果。下面就讓我們來看一看如何使用CSS和圖片來創建按鈕效果。

/*創建基本按鈕樣式*/
.button {
display: inline-block;
padding: 10px 20px;
background: #007acc;
color: #fff;
border-radius: 4px;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
/*添加鼠標懸停時的效果*/
.button:hover {
background: #0067b8;
color: #fff;
}
/*添加點擊時的效果*/
.button:active {
background: #005ba1;
color: #fff;
transform: translateY(2px);
}
/*使用圖片代替背景顏色*/
.image-button {
display: inline-block;
padding: 10px 20px;
background: url('button-bg.png') no-repeat center;
color: #fff;
border-radius: 4px;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
/*添加鼠標懸停時的效果*/
.image-button:hover {
background-color: rgba(0,0,0,0.5);
}
/*添加點擊時的效果*/
.image-button:active {
transform: translateY(2px);
background-color: rgba(0,0,0,0.8);
}

上述代碼中，我們首先創建了一個基本的按鈕樣式，它具有常規的背景顏色和文字顏色。我們還為按鈕的懸停和點擊效果添加了CSS屬性，實現了點擊效果時按鈕會往下移動2px。接下來，我們將使用圖片代替背景顏色，使用CSS的background屬性實現。并使用透明度實現鼠標懸停時的不透明效果。在點擊時，我們將透明度提高至0.8的黑色背景顏色。

通過CSS和圖片，我們可以輕松地創建出不同類型、不同樣式的按鈕效果。使用這種技術，網站可以更加豐富，給用戶更好的交互體驗。