首先需要在HTML文檔中引入圖片。比如我們想要在頁面上加入一張名為“example.jpg”的圖片，可以使用以下代碼：

<img src="example.jpg" alt="example image">

接下來，我們想要給圖片加上一個按鈕，可以在HTML代碼中添加一個“button”元素，代碼如下：

<button>點擊查看大圖</button>

但是，這樣的代碼只是讓按鈕出現在圖片的下面，而并沒有與圖片結合在一起。為了讓按鈕和圖片一起顯示，我們需要使用CSS來調整它們的位置和樣式。 首先，我們可以設置“button”元素的樣式，比如設置背景色、顏色、邊框等等?？梢允褂妙愃埔韵碌拇a：

p><button class="image-button">點擊查看大圖</button></p>
<style>
.image-button {
background-color: #afafaf;
color: #fff;
border: none;
padding: 10px;
}
</style>

另外，我們還需要對“p”元素進行樣式調整，以便讓“button”元素和圖片之間有一段空隙，看起來更美觀?？梢允褂妙愃埔韵碌拇a：

<style>
p {
margin-bottom: 20px;
}
</style>

最終的代碼如下：

<img src="example.jpg" alt="example image">
<p><button class="image-button">點擊查看大圖</button></p>
<style>
.image-button {
background-color: #afafaf;
color: #fff;
border: none;
padding: 10px;
}
p {
margin-bottom: 20px;
}
</style>

這樣，我們就成功地在圖片上添加了一個按鈕了！