CSS是一門用來控制網頁外觀的語言，它可以讓我們輕松地修改樣式，使網頁變得更加美觀。在網頁設計中，按鈕是非常常見的元素。為了增加按鈕的交互性，我們可以在CSS中添加一些代碼，實現按鈕點擊后顯示隱藏內容的效果。

.btn {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.hidden {
display: none;
}

上面的代碼定義了一個按鈕樣式和一個隱藏樣式。在HTML中，我們可以將兩者結合，形成一個可點擊的按鈕，并添加隱藏的內容。

<button class="btn" onclick="showContent()">點擊顯示</button>
<p class="hidden" id="content">這里是隱藏的內容</p>

這里的按鈕有一個class為“btn”，并綁定了一個點擊事件“showContent()”。隱藏的內容使用了class為“hidden”，并設置了一個id為“content”。在CSS中，我們可以通過下面的代碼實現點擊按鈕顯示隱藏內容的效果。

function showContent() {
var content = document.getElementById("content");
if (content.style.display === "none") {
content.style.display = "block";
} else {
content.style.display = "none";
}
}

在JavaScript中，我們通過獲取隱藏內容的id，判斷其是否已經隱藏，使用“display”屬性來控制其顯示和隱藏的效果。

通過以上的代碼，我們成功實現了一個可點擊的按鈕，并隱藏相關內容的效果。這不僅增加了網頁的交互性，同時也讓我們的網頁更加美觀。