CSS按鈕是網頁設計中常見的元素,但有時候我們想要的按鈕并不是那種凸起的突起效果,而是平面的扁平風格。接下來我們來看看如何實現這樣的效果。
首先,我們需要在CSS中為按鈕添加以下樣式:
button { background-color: #ffffff; border: 1px solid #dddddd; border-radius: 5px; color: #333333; font-size: 14px; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; }
通過這些樣式,我們可以讓按鈕呈現出扁平的效果,去掉了原本的凸起感。具體來說:
- 背景色設置為白色,使按鈕看起來更平面化
- 邊框設置為1像素寬的灰色
- 邊框半徑設置為5像素,使按鈕四個角呈現圓角
- 字體顏色設置為深灰色,使按鈕文字更加清晰易讀
- 字體大小設置為14像素,適當放大按鈕,使其更加顯眼
- 內邊距設置為10像素頂部和底部,20像素左右兩側,使按鈕看起來更為整齊
- 文字居中顯示,使其在按鈕中間位置
- 文本裝潢為none,使文字無下劃線
- 按照塊狀元素展示,使按鈕成為獨立的元素
以上樣式可以根據需求進行修改,使得按鈕更加符合設計要求。這樣的按鈕風格常見于平面化設計中,但也可以根據需要添加圖標、陰影等元素進行一定的變化,使得風格更加多樣化。
上一篇css按鈕如何添加陰影
下一篇css按鈕寬度