Анимированные Кнопки css

Общее
1

Здравствуйте есть задача не могу решить, необходимо разобратся с анимированными кнопками, сама кнопка отображается, а как анимированная при наведении и нажатии нет, помогите ламу:)

css файл

.button{text-decoration:none; text-align:center; 
 padding:11px 32px; 
 border:none; 
 -webkit-border-radius:22px 0px 0px 0px; 	 				 border-radius: 22px 0px 0px 0px; 					-moz-border-radius-topleft:22px; 					-moz-border-radius-topright:0px; 					-moz-border-radius-bottomleft:0px; 					-moz-border-radius-bottomright:0px;  
 font:14px Arial, Helvetica, sans-serif; 
 font-weight:bold; 
 color:#ffffff; 
 background-color:#000000; 
 background-image: -moz-linear-gradient(top, #000000 0%, #ff0000 100%); 
 background-image: -webkit-linear-gradient(top, #000000 0%, #ff0000 100%); 
 background-image: -o-linear-gradient(top, #000000 0%, #ff0000 100%); 
 background-image: -ms-linear-gradient(top, #000000 0% ,#ff0000 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ff0000',GradientType=0 ); 
 background-image: linear-gradient(top, #000000 0% ,#ff0000 100%);   
 -webkit-box-shadow:0px 0px 20px #ffffff, inset 0px 0px 20px #ffffff; 
 -moz-box-shadow: 0px 0px 20px #ffffff,  inset 0px 0px 20px #ffffff;  
 box-shadow:0px 0px 20px #ffffff, inset 0px 0px 20px #ffffff;  
  
   -webkit-transition: all 0s ease-in;
 -moz-transition:  all 0s ease-in;
 -o-transition:  all 0s ease-in;
 transition:  all 0s ease-in;}.button:hover{
 padding:11px 32px; 
 border:none; 
 -webkit-border-radius:22px 0px 0px 0px; 	 				 border-radius: 22px 0px 0px 0px; 					-moz-border-radius-topleft:22px; 					-moz-border-radius-topright:0px; 					-moz-border-radius-bottomleft:0px; 					-moz-border-radius-bottomright:0px;  
 font:14px Arial, Helvetica, sans-serif; 
 font-weight:bold; 
 color:#ffffff; 
 background-color:#000000; 
 background-image: -moz-linear-gradient(top, #000000 0%, #ff0000 100%); 
 background-image: -webkit-linear-gradient(top, #000000 0%, #ff0000 100%); 
 background-image: -o-linear-gradient(top, #000000 0%, #ff0000 100%); 
 background-image: -ms-linear-gradient(top, #000000 0% ,#ff0000 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ff0000',GradientType=0 ); 
 background-image: linear-gradient(top, #000000 0% ,#ff0000 100%);   
 -webkit-box-shadow:0px 0px -1px #ffffff, inset 0px 0px 20px #ffffff; 
 -moz-box-shadow: 0px 0px -1px #ffffff,  inset 0px 0px 20px #ffffff;  
 box-shadow:0px 0px -1px #ffffff, inset 0px 0px 20px #ffffff;  
  
 }.button:active{
 padding:11px 32px; 
 border:none; 
 -webkit-border-radius:22px 0px 0px 0px; 	 				 border-radius: 22px 0px 0px 0px; 					-moz-border-radius-topleft:22px; 					-moz-border-radius-topright:0px; 					-moz-border-radius-bottomleft:0px; 					-moz-border-radius-bottomright:0px;  
 font:14px Arial, Helvetica, sans-serif; 
 font-weight:bold; 
 color:#ffffff; 
 background-color:#000000; 
 background-image: -moz-linear-gradient(top, #000000 0%, #ff0009 100%); 
 background-image: -webkit-linear-gradient(top, #000000 0%, #ff0009 100%); 
 background-image: -o-linear-gradient(top, #000000 0%, #ff0009 100%); 
 background-image: -ms-linear-gradient(top, #000000 0% ,#ff0009 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0009', endColorstr='#ff0009',GradientType=0 ); <a href="#" class="button" style="margin-left:100px"/>Тонировка пленками США</a>
 background-image: linear-gradient(top, #000000 0% ,#ff0009 100%);   
 -webkit-box-shadow:0px 0px 20px #ffffff, inset 0px 0px 20px #ffffff; 
 -moz-box-shadow: 0px 0px 20px #ffffff,  inset 0px 0px 20px #ffffff;  
 box-shadow:0px 0px 20px #ffffff, inset 0px 0px 20px #ffffff;  
  
 }
2 
<!DOCTYPE html>
<html>
<head>  
<meta charset="utf-8">
<title>Главная</title>
<link href="css/style.css" rel="stylesheet">  
</head>
<body>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#" class="button" style="margin-left:100px"/>Тонировка пленками США</a>

</body> 
</html>
3

Читать этот прекрасный код одно удовольствие. Все аккуратно, с форматированием, с пробелами, переносами строк, отступами и т. д. Мечта, а не код. )

1 лайк