当前位置DIV+CSS >> 用CSS定义按钮buttom样式

用CSS定义按钮buttom样式

第一步,在html加入下面代码

<button>aa11</button><button>aa22</button><button>aa22</button><button>aa33</button>

<button value="submit" class="submitBtn"><span>I'm a button.</span></button>

 

第二步,在你的CSS文件中加入如下部分:

button {border:0; cursor:pointer; font-weight:bold; padding:0 20px 0 0; text-align:center;width:auto; overflow:visible;}
button span {position:relative; display:block; white-space:nowrap; padding:0 0 0 20px;}
button.submitBtn {background:url(images/btn_blue_right.gif) right no-repeat; font-size:1.2em;}
button.submitBtn span {height:30px; line-height:30px;background:url(images/btn_blue_left.gif) left no-repeat;color:#fff;}
button.submitBtn:hover {background:url(images/btn_blue_right_hover.gif) right no-repeat;}
button.submitBtn:hover span {background:url(images/btn_blue_left_hover.gif) left no-repeat;}

其中width:auto; overflow:visible;是针对在IE下按钮偏移问题作的修正,不影响在FF下的效果。非常遗憾的是,在IE下如要有hover的效果,必须增加额外的Javascript才能实现

 

评论

深圳品牌策划 广告策划 深圳VI设计 深圳画册设计 网页设计 VI设计 网络优化 深圳网站优化 网络推广 画册设计 网站建设 网站优化 Copyright © 2008 www.torwei.com All Rights Reserved.    客服邮箱:wyechoi@hotmail.com
地址:深圳市福田区福华路拓威网络    邮编:518000   链接服务

网站优化,网络推广,关键字优化,搜索引擎排名