Эта статья покажет вам как создавать красивые CSS3 анимированные кнопки из любой ссылки на сайте, без использования каких либо изображений. Вы легко можете настраивать размер кнопки, скругленние углов и цвет. И так для того что-бы превратить простую ссылку в кнопку, надо к ссылке добавить класс button где плюс вы указываете цвет и размер, понятно что эти параметры прописываются в css файле.
Download Submit Submit
И вот пример того что должно получиться.
Download Submit Submit
CSS
Все CSS правила для анимированных кнопок допустим, поместим в buttons.css, это даст возможность легко добавить его к существующему проекту не внося изменения в основные CSS файлы сайта.
Обратите внимание, что приведённые ниже CSS правила будут полностью работать только в новых браузерах, которые поддерживают новые возможности CSS3 (скруглённые углы, градиенты). Для браузеров, которые не понимают CSS3 и которыми всё ещё пользуются люди почему-то нежелающие их обновлять , будут видеть также кнопку с меняющимся оттенком при наведении на неё, но без особой красоты которую даёт CSS3. Более подробно о CSS3 описано в других статьях.
.button{ font:15px Calibri, Arial, sans-serif; /* Полупрозрачная текстовая тень */ text-shadow:1px 1px 0 rgba(255,255,255,0.4); /* Переопределение моделирования подчеркивания по умолчанию */ text-decoration:none !important; white-space:nowrap; display:inline-block; vertical-align:baseline; position:relative; cursor:pointer; padding:10px 20px; background-repeat:no-repeat; /* Фон CSS3 расположение свойства с многократными значениями. сами изображения определены в отдельных цветных классах*/ background-position:bottom left, top right, 0 0, 0 0; background-clip:border-box; /* Применение радиуса границы по умолчанию 8px */ -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; } background-position:bottom left, top right, 0 0, 0 0; background-clip:border-box; /* три размера кнопок */ .button.big { font-size:30px;} .button.medium { font-size:18px;} .button.small { font-size:13px;} /* Более округленная кнопка */ .button.rounded{ -moz-border-radius:4em; -webkit-border-radius:4em; border-radius:4em; } /* BlueButton */ .blue.button{ color:#0f4b6d !important; border:1px solid #84acc3 !important; /* Цвет фона без наведения */ background-color: #48b5f2; } /* Цвет фона при наведении курсора */ .blue.button:hover{ background-color:#63c7fe; } /*Зелёные кнопки*/ .green.button{ color:#0f4b6d !important; border:1px solid #84acc3 !important; /* Цвет фона без наведения */ background-color: #00CC33; } /* Цвет фона при наведении курсора */ .green.button:hover{ background-color: #00FF33; } /*Оранжевые кнопки*/ .orange.button{ color:#0f4b6d !important; border:1px solid #84acc3 !important; /* Цвет фона без наведения */ background-color: #FF9933; } /* Цвет фона при наведении курсора */ .orange.button:hover{ background-color: #FFCC33; } /*--------------------------------------------*/