扁平風格一直是最受追捧的設計風格之一,它簡潔、干凈,特別適合針對現代Web應用程序的按鈕。而且,使用CSS3創建扁平風格按鈕非常容易。
以下是如何創建一個簡單的扁平風格CSS3按鈕的步驟:
- 首先,創建一個button標簽,并添加一個類名“btn-flat”。這個類名用于將按鈕的樣式應用于這個特定的按鈕。
- 在CSS中,設置按鈕的樣式。我們將設置背景顏色為#3498db,文字顏色為白色,以及將邊框顏色設置為透明。
- 然后,將鼠標懸停時的背景顏色設置為#2980b9,并添加一個簡單的過渡效果。
- 最后,設置按鈕的圓角為4px,這將使按鈕看起來更加圓潤板正。
- 經過以上步驟,我們已經創建了一個簡單的CSS3扁平風格按鈕。
以下是CSS3代碼示例:
.btn-flat { background-color: #3498db; color: #fff; border: transparent; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease-in-out; } .btn-flat:hover { background-color: #2980b9; }
現在,您可以照搬這段代碼,輕松地創建您自己的CSS3扁平風格按鈕。