今天我們來介紹一種非常實用的 CSS 按鈕 —— echohoo。 echohoo 不僅具有美觀的外觀，還非常易于使用。本文將逐步展示如何使用 echohoo 創(chuàng)建一個漂亮且實用的按鈕。

// HTML 代碼
<button class="btn-primary">Click me!</button>
// CSS 代碼
.btn-primary {
background-color: #007bff;
border: none;
padding: 12px 24px;
color: #fff;
font-size: 16px;
border-radius: 4px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

首先我們創(chuàng)建一個 button 元素，并為它添加一個 class 為 btn-primary。然后我們定義了按鈕的樣式。背景顏色為藍色（#007bff），邊框為無，內(nèi)邊距為 12px 上下，24px 左右，文字顏色為白色，字體大小為 16px，邊框半徑為 4px，以及一個陰影。

接下來，我們可以再添加一些樣式來增強按鈕的交互效果。

// HTML 代碼
<button class="btn-primary btn-hover">Click me!</button>
// CSS 代碼
.btn-hover {
transition: all 0.3s ease;
cursor: pointer;
}
.btn-hover:hover {
background-color: #0062cc;
}

我們?yōu)榘粹o添加了一個新增的 class 為 btn-hover，以區(qū)分我們之前定義的 btn-primary 樣式。我們給按鈕添加了一個 0.3 秒的過渡效果，并將鼠標指針更改為手形以增強用戶體驗。我們還定義了鼠標懸停在按鈕上時的樣式，將背景顏色更改為稍稍更深的藍色（#0062cc）。

最后，我們可以將我們的按鈕添加到頁面中，它將成為一個漂亮、實用且易于使用的按鈕。

// HTML 代碼
<div class="wrapper">
<button class="btn-primary btn-hover">Click me!</button>
</div>
// CSS 代碼
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

這里我們添加了一個 wrapper，將按鈕居中并垂直居中于頁面。

這就是使用 echohoo 創(chuàng)建按鈕的全部步驟。echohoo 不僅使我們的代碼更簡單、易于維護，同時也增加了我們頁面的可讀性。