CSS按鈕可以通過使用圖像提高其外觀。 使用圖像是使按鈕與您的網站或應用程序的整體設計具有一致性的一種簡單方法。 在此處描述的示例代碼將展示如何創建一個基本的CSS按鈕,其中使用了背景圖像。
.button { background-image: url("button-background.png"); background-repeat: no-repeat; background-position: center center; width: 150px; height: 50px; text-align: center; line-height: 50px; color: white; font-size: 20px; font-weight: bold; text-transform: uppercase; cursor: pointer; }
在上面的代碼中,創建了一個名為“button”的按鈕類,其中使用了背景圖像。 圖像始終居中(使用background-position)并且不會重復(因為設置background-repeat為“no-repeat”)。
按鈕的大小是使用“width”和“height”屬性進行定義,文本的居中是使用“text-align”屬性。
其余樣式定義用于使文本更加突出,例如使用粗體字體。 最后,“cursor”屬性使鼠標指針在按鈕上停留時顯示為手勢。
可以根據需要更改每個屬性的值來適應您自己的按鈕。 一般來說,您可以在CSS按鈕上使用任何圖像,只需將URL指向您希望使用的圖片即可。