使用圖像作為提交按鈕

Question

如果我想制作自己的可點擊按鈕，我可以這樣做：

<a href="javascript:;" class="button">Sign up</a>

a.button CSS規則導致鏈接顯示為按鈕。 如果我將相同的技巧應用於<input type="submit" /> ，我會得到按鈕圖像，但它顯示在默認提交按鈕的頂部，並且光標不會像在<a>上那樣變為手形標簽。

我該如何解決這個問題？

Answer 1

您可以使用input type="image" 。

它是這樣使用的：

<input type="image" src="{your image}" alt="{alternate text}" />

• 在MSDN上input type="image"
• 在MDN上input

Answer 2

您可以使用適當的CSS屬性，例如

border: none;
background: transparent;
cursor: pointer;

從input type="submit"按鈕中刪除默認樣式。

Answer 3

<button id="bar" type="submit"><img src="foo.img" /></button>

這會創建一個內部帶有圖像的提交按鈕。

如果要在鼠標懸停光標時更改光標，請使用此css。

button#bar:hover{cursor:pointer}

Answer 4

使用<input type="submit" />很容易：

input[type=submit] {
    background: transparent url("path/to/image.jpg") 0 0 no-repeat;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    height: 331px; /* height of the background image */
    width: 500px; /* width of the background image */
    border: 5px solid #fff;
    border-radius: 4em;
}

JS小提琴演示 。