按鈕呼吸效果在網頁設計中，常常用來增強用戶體驗。通過一定的css動畫效果，讓按鈕在用戶鼠標懸浮或點擊時，更加生動有趣。以下是一個簡單的css代碼示例，實現按鈕呼吸效果。

.btn {
background-color: #fff;
color: #1e90ff;
border-radius: 20px;
border: 2px solid #1e90ff;
padding: 8px 20px;
font-size: 16px;
transition: all 0.3s ease-in-out;
}
.btn:hover {
background-color: #1e90ff;
color: #fff;
box-shadow: 0 0 20px #1e90ff;
}
.btn:active {
background-color: #fff;
color: #1e90ff;
box-shadow: 0 0 20px #1e90ff;
transform: scale(0.95);
}
.btn:focus {
outline: none;
}
.btn::-moz-focus-inner {
border: 0;
}

上述代碼中，.btn表示按鈕的class，具體樣式可以根據業務需求自行調整。當鼠標懸浮在按鈕上時，通過:hover偽類添加了背景色、顏色和陰影等樣式，使按鈕看起來更具立體感。當按鈕被點擊時，通過:active偽類給按鈕添加了縮小動畫和陰影效果，直到按鈕恢復原樣，使得用戶可以更清楚地感知到點擊按鈕的效果。同時，通過:focus和::-moz-focus-inner可以去掉按鈕獲取焦點時的虛線框，提升用戶體驗。