在網頁設計中，幻燈片是一個十分有用的工具，可以用來展示產品或者其他內容。想要實現幻燈片的自動切換或者手動切換，必須添加按鈕。下面是一個使用HTML制作幻燈片按鈕的示例：

<div class="slideshow">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<div class="slideshow-controls">
<button onclick="prevSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>
</div>

首先，在HTML中創建一個div，使用類名稱為“slideshow”，然后在其中插入所有需要展示的幻燈片圖片。接下來，創建另一個div，使用類名稱為“slideshow-controls”，并在其中創建兩個按鈕，一個“Previous”，一個“Next”，并設置按鈕的onclick事件。這些按鈕將會用于手動切換幻燈片。

<script>
var slideIndex = 1;
showSlide(slideIndex);
function nextSlide() {
showSlide(slideIndex += 1);
}
function prevSlide() {
showSlide(slideIndex -= 1);
}
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n) {
var i;
var slides = document.getElementsByClassName("slideshow");
var dots = document.getElementsByClassName("dot");
if (n >slides.length) {slideIndex = 1}
if (n< 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>

最后，使用JavaScript創建函數來控制幻燈片的自動切換和手動切換。定義一個slideIndex變量，用于標識當前顯示的幻燈片。函數nextSlide()和prevSlide()用于手動切換，而函數currentSlide(n)用于直接顯示第n張幻燈片。最后的showSlide(n)函數根據slideIndex的值，顯示相應的幻燈片。在函數中，將幻燈片的display屬性設置為“none”，并將當前選中的幻燈片的display屬性設置為“block”。

上述HTML和JavaScript代碼共同實現了在網頁上使用按鈕控制幻燈片的自動切換和手動切換。如果需要添加圓點導航，只需要在HTML中創建一個新的div，并添加class為“dot”樣式，再在其內部添加與需要展示的幻燈片數量相同的按鈕，并在JavaScript代碼中添加新的控制函數即可。