按鈕隱藏和顯示在網頁制作中是一個非常常見的需求，特別是在網頁交互設計時。在實現按鈕隱藏和顯示時，我們可以使用 CSS 樣式表的 display 屬性來完成這種效果。

/* 首先定義按鈕隱藏的樣式 */
.hide {
display: none;
}
/* 定義按鈕顯示的樣式 */
.show {
display: block;
}

以上代碼中，我們通過定義兩種不同的 CSS 樣式 .hide 和 .show 分別控制按鈕的隱藏和顯示。其中，.hide 樣式使用 display:none; 屬性來隱藏按鈕，.show 樣式使用 display:block; 屬性來顯示按鈕。

接下來，我們可以通過 JavaScript 代碼來實現按鈕的點擊事件，動態控制按鈕的隱藏和顯示效果：

/* 獲取按鈕元素 */
var btn = document.getElementById("myButton");
/* 定義按鈕點擊事件 */
btn.onclick = function() {
/* 判斷當前按鈕的樣式，如果是隱藏狀態，則切換到顯示狀態 */
if (btn.classList.contains("hide")) {
btn.classList.remove("hide");
btn.classList.add("show");
} else {
/* 切換到隱藏狀態 */
btn.classList.remove("show");
btn.classList.add("hide");
}
};

以上代碼中，我們首先獲取頁面中的按鈕元素，然后定義按鈕的點擊事件。在點擊事件中，我們判斷當前按鈕的樣式是否為 .hide 樣式，如果是，則切換到 .show 樣式；如果不是，則切換到 .hide 樣式，從而實現按鈕的隱藏和顯示效果。

通過以上的 CSS 和 JavaScript 代碼，我們就可以非常方便地實現按鈕的隱藏和顯示效果，使網頁交互更加豐富、生動。