当前位置: 代码迷 >> HTML/CSS >> CSS自适应宽度圆角旋钮
  详细解决方案

CSS自适应宽度圆角旋钮

热度:442   发布时间:2013-01-17 10:28:55.0
CSS自适应宽度圆角按钮
1.背景图片实现 
Html代码:  
  1. a { display: block; float:left; margin-left:5px; height: 37px;line-height: 37px;  background: url(btn_bg.png) no-repeat 0px 0px; color: #d84700; text-decoration: none; padding-left:18px; }  
  2.   a span { display:block; background: url(btn_bg.png) no-repeat right 0px; padding-right:20px;}  
  3.   a:hover { background: url(btn_bg.png) no-repeat 0px -37px;}  
  4.   a:hover span{ background: url(btn_bg.png) no-repeat right -37px;}  
 
Html代码:  
  1. <p>  
  2.  <a href="#"><span>免费注册</span></a>  
  3.  <a href="#"><span>登录</span></a>  
  4.  <a href="#"><span>自适应宽度</span></a>  
  5. </p>  
 
原理就是做一个足够宽的背景,a和span都用同一张背景图,文字左侧部分显示的是a的背景,文字本身和右侧部分显示的是span的背景,拼接成一个按钮。 

2.CSS3 火狐和Chrome实现 
Html代码:  
  1. .button1{  
  2. -moz-border-radius:5px;  
  3. -webkit-border-radius:5px;  
  4. border-radius:5px;  
  5.   
  6. -moz-box-shadow:0 1px 0 rgba(0,0,0,0.3);  
  7. -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.3);  
  8. box-shadow:0 1px 0 rgba(0,0,0,0.3);  
  9.   
  10. background: -moz-linear-gradient(19% 75% 90deg, #E0E0E0, #FAFAFA);  
  11.   
  12. background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#E0E0E0));  
  13.   
  14. color:#4A4A4A;  
  15. float:left;  
  16. font-family:arial,helvetica,sans-serif;  
  17. font-size:17px;  
  18. font-weight:bold;  
  19. padding:10px 15px;  
  20. text-shadow:1px 1px 0 rgba(255, 255, 255, 0.7);  
  21. }  
  22.   
  23. .button1:hover{  
  24. background: -moz-linear-gradient(19% 75% 90deg,#D6D6D6, #FAFAFA);  
  25. background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#D6D6D6));  
  26. }  
 
Html代码 : 
  1. <p><a class="button1">渐变圆角按钮</a></p><br />  
效果: 
 
Html代码 :
  1. .button7{  
  2. -moz-border-radius:3px;  
  3. -webkit-border-radius:3px;  
  4. border-radius:3px;  
  5.   
  6. background: -moz-linear-gradient(19% 75% 90deg,#F0DEB8, #FDF0D1, #fff 100%);  
  7.   
  8. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#F0DEB8), color-stop(.3,#FDF0D1));  
  9.   
  10. color:#836d4d;  
  11. float:left;  
  12. font-family:arial,helvetica,sans-serif;  
  13. font-size:15px;  
  14. font-weight:bold;  
  15. padding:6px 70px;  
  16. border: 1px solid #d4c198;  
  17. }  
  18.   
  19. .button7:hover{  
  20. background: -moz-linear-gradient(19% 75% 90deg,#EBD9B4, #F2E6C8, #F5F5F5 100%);  
  21. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5F5F5), to(#EBD9B4), color-stop(.3,#F2E6C8));  
  22. }  
  23. <a class="button7">站长网</a>  

  相关解决方案