Зміна кольору кнопки при наведенні курсору миші

Ця кнопка буде трохи простіше попередньої. Якщо сказати чесно - це самий простий ефект , який можна застосувати до кнопки . Тому ми трохи покращимо його , додавши плавну зміну кольору кнопки. Зробимо це знову ж за допомогою transition .

Давайте перейдемо до CSS стилям. Для початку поставимо загальні властивості для кнопки:

#button2 {
 background: #d11717;
 border: 2px solid #eee;
 height: 38px;
 width: 125px;
 margin: 50px 0 0 50px;
 overflow: hidden;
 display: block;
 text-align: center;
 line-height: 38px;}

В коде выше, мы устанавливаем цвет фона кнопки, высоту и ширину кнопки, выравниваем текст надписи по центру кнопки. Теперь давайте немного улучшим внешний вид кнопки. Как и в предыдущем примере закруглим углы с помощью border-radius, используем линейный градиент linear-gradient для фона и добавим тень снизу кнопки с помощью свойств box-shadow.

/*закругленные углы*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/*градиент*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
/*тень*/
-webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

Ну і останнє, що нам потрібно зробити це задати стилі для анімації і стиль для ефект при наведенні курсору миші. Робимо все за аналогією з попереднім прикладом:

#button2 {/*Transition*/
 -webkit-transition: All 0.5s ease;
 -moz-transition: All 0.5s ease;
 -o-transition: All 0.5s ease;
 -ms-transition: All 0.5s ease;
 transition: All 0.5s ease;}#button2:hover {
 background-color: #ff3434;}

Кнопка з рухомим фоном

А ось ця кнопка і ефект в ній застосовуваний дуже цікаві. Ефект буде дуже сильно залежати від обраного вами фону. Раджу вам використовувати сервіс з підбору текстур http://subtlepatterns.com/ . А ось як ми доб'ємося потрібного ефекту : ми застосуємо фонове зображення до кнопки , а при наведенні курсору миші ми будемо просто прокручувати фонове зображення. Додайте до цього властивість transition та отримайте приємний скролінг ефект.

Перейдемо до наших стилям CSS. Для початку поставимо загальні властивості . Тут все приблизно так само як і в попередніх прикладах , за винятком того , що ми будемо використовувати зображення в якості фону. Ми так само задамо початкову позицію для фону ( 0,0) . Це робиться для того , щоб створити ефект прокрутки. У наслідку ми просто поміняємо значення по вертикалі.

#button3 {
 background: #d11717 url('bkg-1.jpg');
 background-position: 0 0;
 text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
 font-size: 22px;
 height: 58px;
 width: 155px;
 margin: 50px 0 0 50px;
 overflow: hidden;
 display: block;
 text-align: center;
 line-height: 58px;}

Далі вже за звичним маршрутом - закруглюємо кути і додаємо тінь.

/*закругленные углы*/
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 
 /*тень*/
 -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
 box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

Анімацію ми додамо знову ж за допомогою властивості transition. Єдине, що змінюється - це затримка - збільшимо її трохи, щоб зробити прокрутку трохи більш тривалою.

/*Transition*/
 -webkit-transition: All 0.8s ease;
 -moz-transition: All 0.8s ease;
 -o-transition: All 0.8s ease;
 -ms-transition: All 0.8s ease;
 transition: All 0.8s ease;

Ну і прийшов час для створення ефекту при наведенні курсору миші на нашу кнопку. Згадаймо, що нам потрібно поміняти налаштування фонового зображення. Почали ми з позиції «0 0", тепер же прокрутимо його до «0 150px». Якщо ви захочете зробити рух фону по горизонталі, то просто поміняйте першу цифру.

#button3:hover {
 background-position: 0 150px;}

Кнопка з 3D ефектом натискання

В останньому прикладі ми створимо популярний нині вид кнопок, які імітують тривимірність. Цей ефект буде простіше всіх попередніх, ми навіть не будемо використовувати властивість transition. Але в результаті ми отримаємо дуже навіть приємну кнопку. 

Задамо основні стилі для кнопки. Відмінність від попередніх прикладів полягає в тому, що ми будемо використовувати властивість text-shadow для напису на кнопці щоб додати реалістичності нашому ефекту.

#button4 {
 background: #5c5c5c;
 text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
 font-size: 22px;
 height: 58px;
 width: 155px;
 margin: 50px 0 0 50px;
 overflow: hidden;
 display: block;
 text-align: center;
 line-height: 58px;}

Далі оформимо нашу кнопку. Слід сказати, що ці стилі обов'язкові для цього ефекту - без них ви не побачите результату. Тут ми знову закруглюємо кути, створюємо тінь у кнопки, яка і буде імітувати 3D ефект, а так само використовуємо градієнт для фону кнопки.

/*закругленные углы*/
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 
 /*тень*/
 -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
 -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
 box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
 
 /*градиент*/
 background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
 background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
 background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
 background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
 background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

А ось тепер поставимо стилі при наведенні курсору миші на кнопку. Цей ефект потребують найбільшого коду. Для досягнення потрібного ефекту ми зменшимо висоту тіні, додамо відступ. Це створить ефект руху кнопки при натисканні. Далі перевернемо градієнт, що так само додати реалістичності в наш ефект.

#button4:hover {
 margin-top: 52px;
 
 /*тень*/
 -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
 -moz-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
 box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
 
 /*градиент*/
 background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
 background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
 background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
 background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
 background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));}

Подивитися демо
Дана стаття, сподіваюся, дасть новачкам основні принципи щодо використання CSS властивостей для створення кнопок. Ви можете дізнатися більше звернувшись до циклю статей CSS3 для початківців або переглянувши статті з категорії CSS.

Ви коли небудь задавалися питанням про те, як оптимізувати сайти зроблені на ajax? Якщо так, тоді вам будуть корисними поради з ajax seo оптимізації