使用图片作为提交按钮

Question

如果我想制作自己的可点击按钮，我可以这样做：

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

在CSS规则中，对于 a.button 的定义会使链接显示为按钮。如果我将相同的技巧应用到 <input type="submit" /> 上，我可以得到按钮图像，但它会显示在默认提交按钮的顶部，并且指针不会像在 <a> 标签上那样变成手型。

我该如何修复这个问题？

- Pieter

Answer 1

你可以使用 input type="image" 来实现。

用法如下：

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

• input type="image"在MSDN上的说明
• MDN上有关input元素的说明

- kapa

---

我从来没有考虑过“图像类型”。完成了工作！ - Sobiaholic

Answer 2

您可以使用适当的CSS属性，例如

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

为了去除您的 input type="submit" 按钮的默认样式。

- Jon

Answer 3

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

这将创建一个带有图像的提交按钮。

如果你想在鼠标悬停时更改光标，使用以下CSS。

button#bar:hover{cursor:pointer}

- Gergely Fehérvári

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 Fiddle demo.

- David Thomas