在網頁設計中,一個好看的按鈕可以為整個頁面提供美觀性和方便性。深藍色水晶按鈕就是一個受歡迎的設計。通過使用 CSS,我們可以很容易地實現這種按鈕的樣式。
<style> .btn { display: inline-block; padding: 10px 25px; font-size: 18px; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); background: linear-gradient(to bottom, #286090, #1C4E7E); border: none; outline: none; border-radius: 40px; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); cursor: pointer; } .btn:hover { background: linear-gradient(to bottom, #1C4E7E, #286090); } </style>
上面的 CSS 代碼展示了實現深藍色水晶按鈕所需的樣式。關鍵點包括:
- 使用線性漸變為按鈕添加深藍色陰影。
- 使用投影來使按鈕看起來更加立體。
- 在用戶鼠標懸停時,改變漸變以添加動態效果。
將這段 CSS 和按鈕的 HTML 代碼組合起來,我們將得到一個具有深藍色水晶效果的漂亮按鈕。
<button class="btn">立即注冊</button>
通過 CSS 的強大功能,我們可以很容易地創建漂亮的深藍色水晶按鈕。使用這種按鈕,可以讓您的網站看起來更專業和吸引人。
上一篇css深入詳解