For some time now we have all known about how you can treat a submit button as you would any tag when it comes to styling it with CSS, we can change its background colour, border and font styles using our trusty CSS.
The other day I was coding a project when I thought I would shove a form is – as you do. I also noticed on Stylegala that it has some very cool form submit buttons on most pages; as shown below:
Woooo I thought, I want one of those, especially because it has a cool hover effect. Funny thing was I couldn’t find anywhere it tells you how to do it.
So here is a nice way to do it, it’s the way it is done on Stylegala – so it must be good.
First off you need to create your button using your best loved image program (Fireworks, Photoshop etc), now because of IE and other great browsers you want to have the “on” and “off” state in the same image, like so:
Great! While you still have the graphics thingy open, create a transparent (or see-through) image the same size as one button.
This is what I like to call “the door wedge” because it will hold the space open where the image is so we can use the button we created before.
Now for the code.
<p style="display: none;"><input alt="Spam me" name="Send" class="send-btn" type="submit" value="Spam me" id="Send" src="/img/btn.gif" /></p>
<p><input alt="Spam me" name="Send" class="send-btn" type="image" id="Send" src="/img/btn.gif" tabindex="5" /></p>
The ”/img/btn.gif” is the transparent button we created in the previous step. You also may be wondering why there is another button wrapped with a “style=display: none;”, well it is that A word again – accessibility; a screen reader or un-styled browser may not see anything as the transparent button will be invisible without CSS styling, so this helps them out.
Once you have done all that you need to do the CSS, which goes something like this:
input.send-btn {
width: 130px;
height: 25px;
background: #333 url(/img/btn-send.gif) no-repeat;
outline: none;
}
input.send-btn:hover {
background: #666 url(/img/btn-send.gif) no-repeat 0 -25px;
}
The 0 -25px; needs to be adjusted to correspond to the size of image you used, experiment if you are having trouble.
Sadly the “on effect” will not be seen in IE, because it uses the unsupported :hover attribute – but it will still be visible as the “off effect”.
Hope that helps some people out, any questions?
Update: An example of this technique can be seen in the contact section.
译文:
CSS创建超酷按钮
现在我们可以用CSS帮你制作任何提交按钮，可以任意选择按钮的背景颜色，边框，和字体。
那天我在编写一个程序，想在其中插入一个表格。这时我发现了Stylegala，那里的表格提交按钮都很酷。就像下面图里显示的那样：
当时我就想，我也要制作这样的提交按钮，因为真的很炫。可是我找不到制作指南。
这里有一个很不错的方法，我在Stylegala上面找到的，所以一定棒。
首先你要创建按钮，选择一个你喜欢使用的图像编辑软件（比如Fireworks，Photoshop等等）。如果你想在IE和其它的浏览器上的同一个图片上加入“on” 和 “off”模式，就像这样：
很简单！在一些图像类的东东处于打开状态时，你可以创建一个与按钮相同大小的透明（或者透视的）图像。这个方法很有趣，在"on"的状态下，按钮是亮的；而在“off"的状态下，按钮就会变成透明的。
这里是代码：
<p style="display: none;"><input alt="Spam me" name="Send" class="send-btn" type="submit" value="Spam me" id="Send" src="/img/btn.gif" /></p>
<p><input alt="Spam me" name="Send" class="send-btn" type="image" id="Send" src="/img/btn.gif" tabindex="5" /></p>
”/img/btn.gif” 是在上一步创建的透明按钮。或许你正在纳闷为什么还有另外一个“style=display: none;”按钮呢？那又代表一个词－访问权限。用户或者浏览者也许并不知道，如果没有CSS，他们是看不到这个透明的按钮的。所以使用这个方式可以提醒他们。
如果你已经都按照CSS的要求都做好了，就象下面这样：
input.send-btn {
width: 130px;
height: 25px;
background: #333 url(/img/btn-send.gif) no-repeat;
outline: none;
}
input.send-btn:hover {
background: #666 url(/img/btn-send.gif) no-repeat 0 -25px;
}
如果遇到问题，你可以在0-25 象素之间调整大小，让它符合你的要求。
由于IE浏览器不支持，所以“on effect”在IE中无法实现。不过“off effect”还是可以实现的。
希望上面这些方法对你能有帮助，还有其它的问题吗？
另外：这个技巧的演示可以在contact部分里找到。