Безкоштовні анімовані кнопки для сайту з використанням css3
Нагадую, що ці кнопки є безкоштовними, і ви зможете їх безкоштовно скачати. Поїхали.
Приклад ι Завантажити вихідні
В наявності є 4 кольори кнопок - це синій, зелений, помаранчевий і сірий. Всі класи, які були представлені вище не є обов'язковими, все залежить яку кнопку Ви захочете поставити. Наприклад: якщо потрібна велика і блакитна кнопка, тоді до заслання потрібно присвоїти клас button blue big.
Зазвичай імена класів вибирають так, щоб вони легко запам'ятовувалися, але при цьому велика ймовірність того, що одні класи будуть плутатися з іншими класами на Вашій сторінці.
Якщо дана кнопка буде виглядати не правильно на Вашому сайті, спробуйте привласнити понад унікальний клас, але в цьому випадку потрібно буде відредагувати їх і в CSS.
Ну а тепер давайте все ж подивимося як ці кнопки робляться за допомогою CSS.
Весь код кнопок знаходиться в buttons.css. Ви з легкістю зможете його помістити в існуючий сайт і використовувати його, що істотно полегшує завдання.
Як ви бачите, що кожна кнопка має 4 фонових зображення, які все одночасно застосовуються. Здається тут все лякає, але не все так складно, тільки один файл використовується з сервера - це фонове зображення бульбашок. І ніякого навантаження на сервер це не несе.
Це фонове зображення застосовується для анімації в кнопках при наведенні. Як ви помітили зображення не анімоване. Сама анімація робиться тільки за допомогою CSS3.
Тепер кілька слів про розмір і заокруглених кутів кнопок:
У коді вище вказані три класи - це big. medium і small. Відповідно до кожного класу ставимо різні значення в пікселях. Все добре видно на коді вище.
А тепер саме цікаве частина - це кольори. Тут, в принципі теж нічого складного немає.
Ось на цьому поки що і все. Хочу заздалегідь попередити, що в даний час, можливо кнопки не працюватимуть в деяких браузерах, тому що, ще поки, не всі вони підтримують CSS3. Але мені здається, що ця проблема скоро вирішиться.
Приклад ι Завантажити вихідні
До швидких зустрічей, друзі.