CSS adaptive width rounded corner button

1. html code for background image implementation: 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;} a span {display: block; background: url(btn_bg.png) no-repeat right 0px; padding-right: 20px;} a: hover {background: url(btn_bg.png) no-repeat 0px-37px;} a: hover span {background: url(btn_bg.png) No-repeat right-37px;} Html code: <p> <a href = "#"> <span> free registration </span> </a> <a href = "#"> <span> logon </span> </a> <a href = "#"> <span> adaptive width </span> </a> </p> the principle is to set a background that is wide enough, both a and span use the same background image. The left part of the text displays the background of a, and the text itself and the right part displays the background of span, and concatenates them into a button. 2. CSS 3 Firefox and Chrome implement Html code :. button1 {-moz-border-radius: 5px;-webkit-border-radius: 5px; border-radius: 5px;-moz-box-shadow: 0 1px 0 rgba (0, 0, 0, 0.3);-webkit-box-shadow: 0 1px 0 rgba (0.3, 0, 0.3); box-shadow: 0 1px 0 rgba (, 0 ); background:-moz-linear-gradient (19% 75% 90deg, # E0E0E0, # FAFAFA); background:-webkit-gradient (linear, left top, left bottom, from (# FAFAFA), to (# E0E0E0); color: # 4A4A4A; float: left; font-family: arial, helvetica, sans-serif; font-size: 17px; font-weight: bold; padding: 10px 15px; text-shadow: 1px 1px 0 rgba (255,255,255, 0.7 );}. button1: hover {background:-moz-linear-gradient (19% 75% 90deg, # D6D6D6, # FAFAFA); background:-webkit-gradient (linear, left top, left bottom, from (# FAFAFA), to (# D6D6D6);} Html code: <p> <a class = "button1"> gradient rounded corner button </a> </p> <br/> effect: Html code :. button7 {-moz-border-radius: 3px;-webkit-border-radius: 3px; border-radius: 3px; background:-moz-linear-gradient (19% 75% 90deg, # F0DEB8, # FDF0D1, # fff 100%); background:-webkit-gradient (linear, 0% 0%, 0% 100%, from (# FFFFFF), to (# F0DEB8 ), color-stop (. 3, # FDF0D1); color: # 836d4d; float: left; font-family: arial, helvetica, sans-serif; font-size: 15px; font-weight: bold; padding: 6px 70px; border: 1px solid # d4c198 ;}. button7: hover {background:-moz-linear-gradient (19% 75% 90deg, # EBD9B4, # F2E6C8, # F5F5F5 100%); background:-webkit-gradient (linear, 0% 0%, 0% 100%, from (# F5F5F5), to (# EBD9B4), color-stop (. 3, # F2E6C8);} <a class = "button7"> webmaster Network </a>