CSS 是現代 Web 設計中最重要的組成部分，能夠控制文本、圖片、布局等元素的樣式和格式。通過使用 CSS 代碼，設計師可以輕松實現許多外觀和交互效果，比如投影效果的增加。我們可以通過 CSS 代碼增加按鈕投影效果，使按鈕看起來更加立體、有層次感。

.btn {
background-color: #3F51B5;
color: #fff;
padding: 15px 30px;
font-size: 18px;
border: none;
outline: none;
/* 鼠標懸停效果 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

在上面的代碼中，我們使用了 box-shadow 屬性來定義陰影效果。box-shadow 屬性有四個值，可以依次設置：

• 水平、垂直方向的偏移量。
• 陰影模糊半徑。
• 陰影擴散半徑。
• 陰影顏色。

在我們的按鈕樣式中，我們設置了一個偏移量為 0，表示陰影效果朝下，不向左或向右偏移。模糊半徑為 4px，顏色為黑色 0.2 的透明度，這會讓陰影看起來更加柔和。擴散半徑為 8px，表示整個陰影占據了按鈕周圍 8px 的空間。

通過增加按鈕投影效果，我們可以使網頁看起來更加動態有趣，用戶交互的時候也更加輕松自然。在實踐過程中，我們可以根據具體需求和設計風格來調整代碼，使按鈕的投影效果更符合實際情況。