CSS是網頁設計中必不可少的一部分,它可以控制網頁元素的樣式,其中按鈕樣式是網頁設計中常見的一個樣式。下面是一個CSS按鈕樣式代碼6:
.btn { display: inline-block; color: #fff; background-color: #1abc9c; border: none; border-radius: 25px; padding: 10px 20px; font-size: 1rem; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .btn:hover { background-color: #16a085; }
這段代碼定義了一個按鈕類“btn”,該按鈕具有以下樣式:
- 顯示為內聯塊狀元素,可以和其他元素并排顯示;
- 文字顏色為白色;
- 背景顏色為青色(#1abc9c);
- 沒有邊框;
- 圓角半徑為25像素;
- 內邊距分別為10像素和20像素;
- 字體大小為1rem;
- 文字居中對齊;
- 無下劃線;
- 鼠標移上去時背景顏色變為較淺的青色(#16a085);
- 有指針(手形)鼠標樣式;
- 有輕微的陰影效果。
使用這種按鈕樣式可以增強網頁的交互性和美觀性,提高用戶體驗。既可以應用于博客站點,也可以應用于電商網站、社交網站等各種類型的網站。