Приголомшлива анімована 3d кнопка на css3

Сьогодні я хочу показати вам, як використовувати деякі з дивних можливостей CSS3 для створення анімованої тривимірної кнопки.

Ви можете побачити правильне відображення в браузері Chrome. На жаль Firefox, наприклад, не показує остання властивість (3D спотворення).

Приклад анімованої кнопки можна побачити тут:

HTML частина

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

Тут немає поки що нічого особливого. Просто кнопка і основні стилі. А ось далі додамо градієнт ...

CSS3 градієнт

Для того щоб градієнт ми я не буду писати з нуля, а лише згенерує через Gradient Generator щоб скоротити час. Ви також можете скористатися таким же сервісом (докладніше які сервіси бувають ви знайдете в моїй статті тут).

Потім за допомогою цих квітів для створення градієнта: # 609bcb () і # 4a85b5 (). Велика помилка початківців веб-дизайнерів робити градієнт дуже різким. Ми ж просто хочемо додати легкий ефект обсягу.

Потім необхідно додати стиль при наведенні на кнопку. Зробимо кнопку світлішою при наведенні. Для цього використовуємо ще раз градієнт:

На зображенні вище видно легкий градієнт і ефект при наведенні на кнопку.

Гострі краї виглядають не дуже красиво. Давайте трохи закруглити їх:

Ці три рядки роблять закруглення в 5 пікселів (px) в різних браузерах (при цьому і старих також). Не робіть радіус занадто великим, тому кнопка буде виглядати трохи дивно.

Ось як виглядає наша кнопка на даний момент.

Додамо тіні

Зараз, щоб текст зробити частиною цієї кнопки, можна застосувати для тексту тінь: