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

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

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

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

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

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

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

通過以上的代碼，我們成功實(shí)現(xiàn)了一個(gè)可點(diǎn)擊的按鈕，并隱藏相關(guān)內(nèi)容的效果。這不僅增加了網(wǎng)頁的交互性，同時(shí)也讓我們的網(wǎng)頁更加美觀。