使用图像作为提交按钮

If I want to make my own clickable buttons, I can do this:

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

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

Where CSS rules for a.button causes the link to be shown as a button. If I apply the same trick to <input type="submit" />, I get the button image but it is shown on top of the default submit button and the cursor doesn't change to a hand like it does on <a> tags.

a.button的CSS规则导致链接显示为按钮。如果我将相同的技巧应用于,我会得到按钮图像,但它显示在默认提交按钮的顶部,并且光标不会像在上那样变为手形标签。

How can I fix this behavior?

我该如何解决这个问题?

4 个解决方案

#1

You can use appropriate CSS properties such as

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

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

to remove the default styles from your input type="submit" button.

从输入类型=“提交”按钮中删除默认样式。

#2

You could use an input type="image" instead.

您可以使用输入类型=“图像”。

It is used like this:

它使用如下:

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

input type="image" on MSDN

在MSDN上输入type =“image”

input on MDN

在MDN上输入

#3

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

this creates a submit button with an image inside.

这会创建一个内部带有图像的提交按钮。

and if you want to change the cursor when you mouseover the cursor use this css.

如果要在鼠标悬停光标时更改光标,请使用此css。

button#bar:hover{cursor:pointer}

#4

It's easy enough, to use an <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.

JS小提琴演示。

#1