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

最新推荐文章于 2023-01-09 11:52:45 发布

hookwl

最新推荐文章于 2023-01-09 11:52:45 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS&HTML 文章标签： button border 浏览器 input ie css

本文链接：https://blog.youkuaiyun.com/hookwl/article/details/7321305

CSS&HTML 专栏收录该内容

2 篇文章

订阅专栏

在网上经常会看到一些非常漂亮的按钮，其中有一种按钮左边是漂亮的图标，右边是文字，看起来很酷。网上大多漂亮的按钮都是图片按钮，需要用到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>标签来实现是最好的（水平有限，个人愚见哈，不要向我喷水）。