上傳按鈕是網(wǎng)站中常用的一個組件,它用于上傳文件并提交至服務(wù)器端。若想讓上傳按鈕更美觀、易于使用,可以通過CSS樣式進(jìn)行自定義。下面是一個上傳按鈕的CSS樣式示例:
.upload-btn { background-color: #4285f4; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; transition: all .2s ease-in-out; } .upload-btn:hover { background-color: #357ae8; }
以上CSS代碼中,.upload-btn是指定上傳按鈕的class。接著,通過background-color屬性為上傳按鈕設(shè)置背景顏色,#4285f4為Google藍(lán)色,這里可以自行更改為自己喜歡的顏色。color屬性用于設(shè)置上傳按鈕的文本顏色,此處設(shè)為白色。border屬性設(shè)置按鈕邊框,這里設(shè)置為無。padding屬性是設(shè)置按鈕內(nèi)邊距,10px表示上下內(nèi)邊距,20px表示左右內(nèi)邊距。font-size屬性用于設(shè)置按鈕文字大小,這里設(shè)置為16px。cursor屬性表示鼠標(biāo)移動到上傳按鈕上時的指針樣式,這里設(shè)置為手型。transition屬性用于設(shè)置過渡效果,此處為按鈕背景顏色的漸變。
接下來,使用:hover偽類為上傳按鈕添加鼠標(biāo)懸浮事件的樣式效果。這里把背景色改為#357ae8,即稍微深一些的藍(lán)色。
通過上述CSS樣式的設(shè)置,上傳按鈕將變得更美觀、易于使用。使用時只需將class為upload-btn的樣式應(yīng)用到上傳按鈕上即可。
上一篇三角形不填充css