CSS的按鈕設計是網頁設計中重要的一部分，往往會使用HTML代碼與CSS樣式共同完成。在HTML中，按鈕使用button元素。我們先來看一下HTML代碼的基本形式：

<button>按鈕名稱</button>

在這個基本框架上，我們可以結合CSS樣式對按鈕進行設計，使其更符合網站設計風格，提升用戶的使用體驗。下面是一個CSS按鈕HTML代碼的例子：

<button class="btn">登錄</button>

在這里，我們使用class屬性來定義按鈕的樣式。btn是按鈕樣式的名稱，它在CSS樣式表中進行定義。

.btn {
display: inline-block;
padding: 10px 30px;
margin: 5px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #1abc9c;
border: none;
border-radius: 5px;
box-shadow: 2px 2px 3px #999;
}

這里我們利用CSS樣式表對按鈕進行樣式的定義。例如，我們對按鈕進行了如下樣式的定義：

• display: inline-block：讓按鈕變為內聯塊級元素，使其可以和文本一起顯示
• padding: 10px 30px：設置按鈕內部的上下左右內邊距
• margin: 5px：設置按鈕外部的上下左右邊距
• font-size: 16px：設置按鈕內部字體大小
• font-weight: bold：設置按鈕內部字體加粗
• color: #fff：設置按鈕內部字體顏色為白色
• background-color: #1abc9c：設置按鈕背景顏色為淡綠色
• border: none：去除按鈕邊框
• border-radius: 5px：設置按鈕圓角
• box-shadow: 2px 2px 3px #999：設置按鈕陰影效果

通過HTML代碼與CSS樣式的結合，我們可以設計出大量款式不同的按鈕，來豐富我們的網頁設計，提升用戶體驗。