КНОПКА ПОКУПКИ

<a href="#" class="buybtn">  
  <span class="buybtn-text">  
  Купить  
  </span>  
  <span class="buybtn-hidden-text">  
  150$  
  </span>  
  <span class="buybtn-image">  
  <span></span>  
  </span>  
  </a>

.wrap{ <br> margin:100px 30%; <br> } <br><br> a { <br> color: #FFFFFF; <br> text-decoration: none; <br> } <br> .buybtn { <br> -moz-transition: all 0.3s linear 0s; <br> background: -moz-linear-gradient(center top , #FF8400 0%, #FF6600 100%) repeat scroll 0 0 transparent; <br> border: 1px solid #FF5A00; <br> border-radius: 5px 5px 5px 5px; <br> box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2); <br> clear: both; <br> display: inline-block; <br> float: left; <br> font-family: Arial,sans-serif; <br> height: 45px; <br> margin: 10px 0; <br> overflow: hidden; <br> padding-left: 20px; <br> padding-right: 65px; <br> position: relative; <br> } <br> .buybtn-text { <br> -moz-transition: all 0.2s linear 0s; <br> color: #6E1D08; <br> display: block; <br> font-size: 18px; <br> padding-top: 10px; <br> text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3); <br> white-space: nowrap; <br> } <br> .buybtn-hidden-text { <br> -moz-transition: width 0.3s linear 0s; <br> background: none repeat scroll 0 0 #6E1D08; <br> box-shadow: -1px 0 1px rgba(255, 255, 255, 0.4), 1px 1px 2px rgba(0, 0, 0, 0.2) inset; <br> color: #FFFFFF; <br> font-size: 18px; <br> height: 100%; <br> line-height: 42px; <br> overflow: hidden; <br> position: absolute; <br> right: 52px; <br> text-align: left; <br> text-indent: 17px; <br> text-shadow: 0 -1px 1px #363F49; <br> text-transform: uppercase; <br> top: 0; <br> white-space: nowrap; <br> width: 0; <br> } <br> .buybtn-image { <br> border-left: 1px solid #FF5A00; <br> box-shadow: 1px 0 1px rgba(255, 255, 255, 0.4) inset; <br> height: 100%; <br> position: absolute; <br> right: 0; <br> top: 0; <br> width: 52px; <br> } <br> .buybtn-image span { <br> -moz-transition: all 0.3s linear 0s; <br> background: url("http://webmaster-profi.ru/scripts_ucoz/cart.png") no-repeat scroll 75% 55% transparent; <br> height: 38px; <br> left: 50%; <br> margin: -20px 0 0 -20px; <br> opacity: 0.7; <br> position: absolute; <br> top: 50%; <br> width: 38px; <br> } <br> .buybtn:hover .buybtn-text { <br> color: #FFFFFF; <br> text-shadow: 0 1px 1px #5D81AB; <br> } <br> .buybtn:hover .buybtn-hidden-text { <br> width: 100px; <br> } <br> .buybtn:hover .buybtn-image span { <br> opacity: 1; <br> } <br> .buybtn:active { <br> background: none repeat scroll 0 0 #FF5A00; <br> }