CSS 長方形按鈕是網站開發中常用的元素之一，它可以用于各種頁面交互，比如表單提交、導航鏈接等。下面我們來學習如何使用 CSS 來制作一個簡單的長方形按鈕。

/* CSS 代碼 */
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #ffffff;
background-color: #4169e1;
border: none;
border-radius: 5px;
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
.btn:hover {
background-color: #1e90ff;
}

首先，我們定義一個 class 名稱為 .btn。該按鈕元素使用了 display: inline-block; 屬性，以便在 HTML 中適應不同的定義方式。接下來，我們需要設置按鈕的 padding、font-size、color 等樣式，使其看起來更加美觀。此外，利用 background-color 來設置按鈕背景顏色，使用 border-radius 添加按鈕圓角效果，border 屬性為 none，取消按鈕邊框效果。

最后，我們還可以使用 box-shadow 屬性為按鈕添加陰影效果，以幫助其顯得更加立體和突出。同時，使用 :hover 偽類來實現鼠標懸浮效果，讓按鈕變為深色，以增強用戶交互性。

上述 CSS 代碼在 HTML 中使用時，則可以將其作為 class 名稱添加到按鈕元素的 class 屬性中，如下所示：

<button class="btn">提交</button>

通過以上代碼，我們可以簡單地實現一個長方形按鈕，并通過 CSS 優化其樣式效果，提高網站的用戶體驗。