简单制作左图右文字的按钮

在网上经常会看到一些非常漂亮的按钮，其中有一种按钮左边是漂亮的图标，右边是文字，看起来很酷。网上大多漂亮的按钮都是图片按钮，需要用到PS来不断的P，直到达到想要的效果，如果尺寸有偏差还得继续P。另外后期要给整个网站换效果，还得把所有的图片都P一遍，想想就觉得。。。这样太实在太让人蛋疼了，个人倾向用CSS来实现效果，这样大小、风格、效果都可以统一控制，可谓是一劳永逸啊。经过几天的不懈的努力学习，终于找到了两种比较简单的方法。

一、利用<button>标签来实现。

最开始用<input>的button类型来实现，把图标设为button的背景，然后给button设置padding-left为图标空出空间。刚开始看起来还可以，效果也都达到了，可这样的话就不能控制图标的大小了，所以图标的大小本身就是合适的大小，想想这样还是很蛋疼。天无绝人之路，偶然看到一篇文章，某位好心人翻译的一篇老外写的文章《被遗忘掉的button标签》，看完后真是受益良多的。

注：

《被遗忘掉的button标签》http://particletree.com/features/rediscovering-the-button-element/

《被遗忘掉的button标签》译文地址http://www.jb51.net/web/6454.html

<!--button标签实现的带图片的按钮!-->button标签实现的带图片的按钮<p /><button type="button" ><img src="image/cut.png"/>Cut</button><button type="button" ><img src="image/save.png"/>Save</button><button type="button" ><img src="image/search.png"/>Search</button><button type="button" ><img src="image/openfile.png"/>Open File</button><p /><style type="text/css">button{display:inline-block;overflow:visible;/*在IE浏览器要设置该样式让按钮自适应大小*/padding:2px 10px 2px 10px;background-color:#F0FFF0;border:solid 1px #dddddd;text-decoration:none;font-size:12pt;font-weight:bold;color:#777777;text-align:left;}button img{border:0px;vertical-align:middle;/*让图片与文字垂直居中显示*/margin-right:5px;width:20px;width:20px;}/*万恶的IE6不支持该效果*/button:hover{cursor:hand;color:#444444;border:1px solid #aaaaaa;background-color:#E6E6FA;}</style>

二、利用<a>标签来实现图片按钮

利用<a>标签可以实现各种各样漂亮的button，很自然的可以实现图片+文字的按钮，而且可以方便地控制鼠标悬停、点击等效果，但是在表单中，我觉得还是<button>标签比较靠谱。

<!--a标签实现的带图片的按钮!-->a标签实现的带图片的按钮<p /><a href="#" ><img src="image/cut.png"/>Cut</a><a href="#" ><img src="image/save.png"/>Save</a><a href="#" ><img src="image/search.png"/>Search</a><a href="#" ><img src="image/openfile.png"/>Open File</a><style type="text/css">a{display:inline-block;/*按钮自适应大小*/padding:2px 10px 2px 10px;background-color:#F0FFF0;border:solid 1px #dddddd;text-decoration:none;font-size:12pt;font-weight:bold;color:#777777;text-align:left;}a img{border:0px;vertical-align:middle;/*让图片与文字垂直居中显示*/margin-right:5px;width:20px;width:20px;}a:hover{cursor:hand;color:#444444;border:1px solid #aaaaaa;background-color:#E6E6FA;}</style>

小结：如果单纯说要实现这种图片+文字的按钮效果，我觉得方法还是很多的，比方说万能的<div>+js也可以实现，但是从简洁和控制的方便性来说，我觉得<button>和<a>标签来实现是最好的（水平有限，个人愚见哈，不要向我喷水）。