CSS按鈕是網站界面設計中常用的元素之一。通常情況下,CSS按鈕的樣式很單一,如果想要更改按鈕的樣式,我們就需要對按鈕進行改造。
.button { background-color: #007bff; border: none; color: #fff; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; }
上面是一個樣式簡單的CSS按鈕,我們可以對它進行如下改造:
改變按鈕顏色
我們可以通過修改CSS中的background-color
屬性,來改變按鈕的背景顏色。
.button { background-color: #ff6347; }
改變按鈕的大小
我們可以通過修改CSS中的padding
屬性,來改變按鈕的大小。
.button { padding: 20px 30px; }
改變按鈕的邊框
我們可以通過修改CSS中的border
屬性,來改變按鈕的邊框。
.button { border: 2px solid #ccc; }
改變按鈕的文字顏色
我們可以通過修改CSS中的color
屬性,來改變按鈕的文字顏色。
.button { color: #000; }
給按鈕添加陰影效果
我們可以通過修改CSS中的box-shadow
屬性,來給按鈕添加陰影效果。
.button { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); }
以上這些改造只是一些簡單的示例,你可以根據實際情況對CSS按鈕進行更加豐富的改造。
下一篇css最高級屬性