提交按钮图像 [英] Submit Button Image

问题描述

我想使用提交按钮图片，而不是标准按钮。我在Google和SO上搜索，并得到了几种不同的方法。

I want to use a Submit Button Image instead of the standard Button. I searched on Google and SO and got a few different ways.

这是使用图片作为提交按钮的正确方法？

Which is the right way of using an Image as a Submit Button ?

按钮的三个状态 - 正常，悬停，onclick

Also i would want to add three states for the button - normal, hover, onclick

我尝试了

HTML

<input type="submit" value="Subscribe">

CSS

input[type=submit] {
    background:url(../images/btn-subscribe.gif) none;
    text-indent:-9999px;
    width:109px;
    height:41px;
}

显示

>

推荐答案

已编辑：

在此 DEMO 中执行操作

I think you are trying to do as done in this DEMO

有三种状态的按钮：正常，悬停和活动

您需要使用 CSS Image Sprites 。

You need to use CSS Image Sprites for the button states.

查看CSS Sprites的谜

/*CSS*/

.imgClass { 
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position:  0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{ 
  background-position:  0px -52px;
}

.imgClass:active{
  background-position:  0px -104px;
}

<!-- HTML -->
<input type="submit" value="" class="imgClass" />

这篇关于提交按钮图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！