如何使用 CSS 設定輸入按鈕圖像及其懸停效果的樣式？

使用CSS 設定輸入按鈕影像的樣式

簡介

使用HTML 建立帶有影像的輸入按鈕很簡單，但使用CSS 變更其外觀可以具有挑戰性。本文解決了使用 CSS 解決方案將圖像添加到輸入按鈕並修改其懸停時的外觀的問題。

問題

有些使用者嘗試使用 CSS 來設定輸入按鈕的樣式形象，但面臨困難。他們可能嘗試定義自訂 CSS 類，但無法實現所需的懸停效果。

解決方案

要使用CSS 為帶有圖像的輸入按鈕設定樣式，需要使用“type屬性。”將類型設為“type='submit'”，而不是“type ='image'」。這允許您使用 CSS 來控制按鈕的外觀。

<input type="submit">

設定按鈕後作為「提交」按鈕，您可以將 CSS 樣式套用到「myButton」類別來定義其外觀，包括新增圖片作為背景。

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

透過此方法，您可以使用「:hover」偽類修改按鈕懸停時的外觀。

.myButton:hover {
    background-color: #ff0000;
}

此 CSS 解決方案允許使用圖像對輸入按鈕進行樣式和懸停效果，解決使用者面臨的問題。但要注意的是，Safari 可能不支援這種特定的樣式方法。在這種情況下，可能需要使用圖像和 onclick 函數來提交表單。

以上是如何使用 CSS 設定輸入按鈕圖像及其懸停效果的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！