Ми створимо Динамічну кнопку з унікальним ефектом при наведенні. Суть сьогоднішньої статті - показати основні прийоми роботи з CSS. І ця стаття буде швидше корисна новачкам ніж професіоналам. Кожен може використовувати ці кнопки у своїх проектах, але не лінуйтеся експериментувати і створювати нові ефекти.

HTML-розмітка

Для експериментів ми будемо використовувати максимальної простий варіант - ми просто візьмемо посилання і будемо стилізувати її як блоковий елемент.

Підпишись

<a href="#" class="a_demo_one">
     Click me!
</a>

.buttonText {
  font: 18px/1.5 Helvetica, Arial, sans-serif;
  color: #fff;
}

 a {
  color: #fff;
  text-decoration: none;
}

Динамічна кнопка

Перший приклад буде напевно найцікавішим. При наведенні курсору миші на кнопку на різних сайтах ми приблизно знаємо чого чекати. Ця ж кнопка буде з сюрпризом - вона буде змінювати свій розмір при наведенні!

Суть в тому, що спочатку в нас буде звичайна кнопка з текстом, в нашому випадку «Підписатися». При наведенні курсору миші кнопка буде збільшуватися в ширину і ми побачимо частину тексту, яка спочатку прихована. Давайте подивимося як реалізувати таку ідею.

CSS
Щоб почати, нам потрібно задати нашої кнопки колір і форму. Нижче в коді ми встановлюємо висоту в 28px і ширину в 115px, додаємо відступи і кордон кнопці.

#button1 {
  background: #6292c2;
  border: 2px solid #eee;
  height: 28px;
  width: 115px;
  margin: 50px 0 0 50px;
  padding: 0 0 0 7px;
  overflow: hidden;
  display: block;
}

Багато хто останнім часом дивуються коли бачать, скільки стилів використовується для створення всього лише однієї кнопки. Тому ми розіб'ємо наш CSS на декілька фрагментів. У цьому фрагменті, який в принципі не обов'язковий, ми зробимо нашу кнопку більш привабливою. межа радіусу тут використовується для створення закруглених кутів. Лінійний градієнт ми будемо використовувати для створення фону нашої кнопки. Інтерес цього градієнта в тому, що починається він з прозорого кольору, що добре поєднує його з будь-яким фоном.

/*закругленные углы*/
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
   /*градиент*/
  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));

Теперь нам остается только прописать стили для создания анимации с помощью CSS. Для этого мы будем использовать свойство transition. Здесь все просто — мы выбираем тип анимации и задаем задержку.

/*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;

Ну і останнє, що залишилося зробити це задати стиль при наведенні курсору миші на кнопку. Тут все ще простіше. Ми просто збільшимо ширину кнопки до 200px.

#button1:hover {
  width: 200px;
}