Категория: CSS.
Эта статья покажет вам как создавать красивые 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;
}
/*--------------------------------------------*/