Анимированная кнопка








Rammstein
Анимированная кнопка для сайта
html код для вставки:
<style>

<BODY bgcolor="#33CCFF">

body {
background-color:white; /* Фон */
margin:0;     /* Внешний отступ 0 */
padding:0;     /* Внутренний отступ 0 */
text-align:center;    /* Текст по центру (для IE) */
}
.main {
margin:0 auto;    /* Внешних отступов 0, делаем элемент по центру */
width:800px;    /* Обязательно наличие ширины */
text-align:center;    /* Текст по центру  */
}
#button {
    background-color: #DFDFDF; /* Фон */
    color: #7F7F7F;    /* Цвет текста */
    font: 13pt "Trebuchet MS", Verdana;    /* Размер, семейство шрифта */
    padding: 6px;    /* Внутренние отступы */
    width: 136px;    /* Ширина */
    height: 18px;    /* Высота */
    display: block;    /* Блочный элемент */
    overflow: hidden;    /* Лишиние, что не поместилось, будет убрано */
    /* Плавность */
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
}
#button:hover {
    width: 355px; /* Ширина при наведении */
    color:#438AFA;    /* Цвет текста */
}
</style>

<style type="text/css">
   A {
    text-decoration: none; /* Отменяем подчеркивание у ссылки */
   }
  </style>


<div class="main">
<br><br><br><br>
<center>
<a href="Адрес вашей ссылки"><div id="button">Надпись на кнопке</div>
</div>