↓ Також Вам буде цікаво ↓
- Прості іконки з ефектом при наведенні + 17 варіантів
- Кнопки CSS3 - творчі стилі 30+ кнопок!
- CSS3 кнопки "Bubble" з анімацією бульбашок!
- Кнопка вкл / викл (чекбокс / checkbox) на CSS3
- Завантажити продає графіком PSD для ваших проектів в 4-х відтінках
- CSS3 ефект при наведенні на зображення + 5 прикладів!
У цій статті ми розглянемо створення нестандартної кнопки, а саме - CSS кругла кнопка з красивим ефектом анімації заднього фону. Єдине, що в цю кнопку не поміститься багато тексту, але при бажанні цей момент можна доопрацювати. Наше головне завдання - це кругла кнопка на CSS3.
Що конкретно ми зробимо? Круглу кнопку із зіркою всередині. І звичайно, при наведенні на неї, ми зробимо анімацію - обертання цієї зірки (з невеликим імпульсом), а також додамо поява додаткового тексту.
HTML основа
У нас буде три тега span. Останній тег це буде прихований текст, який показується при наведенні курсору миші.