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

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

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

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

Подивитися прімерСкачать

HTML частина

У коді HTML у нас буде тільки посилання і нічого більше, все інше ми допишемо в CSS:

1	lt;a href="#" class="Button"gt; Клікlt;/agt;

CSS частина

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

1234567891011121314151617

body {font-family: Helvetica, Arial, sans-serif-background: # d6d6d6-text-align: center-padding: 50px 0px-}.button {display: inline-block-text-decoration: none-color: #fff-font-weight: bold-background-color: # 538fbe-padding: 20px 70px-font-size: 24px-border: 1px solid # 2d6898-}

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

Відео: Pure CSS Animated Button Tutorial

CSS3 градієнт

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

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

1234567891011121314151617181920212223

.button {display: inline-block-text-decoration: none-color: #fff-font-weight: bold-background-color: # 538fbe-padding: 20px 70px-font-size: 24px-border: 1px solid # 2d6898-background-image: linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%)-background-image: -o-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%)-background-image: -moz-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%)-background-image: -webkit-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%)-background-image: -ms-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%)-background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(73,132,180)),color-stop(1, rgb(97,155,203)))-}

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

123456789101112131415

.button: hover {background-image: linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%)-background-image: -o-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%)-background-image: -moz-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%)-background-image: -webkit-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%)-background-image: -ms-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%)-background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(79,142,191)),color-stop(1, rgb(102,166,214)))-}

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

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

123	-webkit-border-radius: 5px--moz-border-radius: 5px-border-radius: 5px-

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

Ось як виглядає наша кнопка зараз.

Додамо тіні

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

1	text-shadow: 0px-1px 0px rgba(0,0,0,.5)-

Далі додамо тінь нашої кнопці:

123	-webkit-box-shadow: 0px 6px 0px # 2b638f--moz-box-shadow: 0px 6px 0px # 2b638f-box-shadow: 0px 6px 0px # 2b638f-

І трохи вдосконалюємо наш код, додавши тіні в певні місця, для того щоб кнопка стала об`ємною:

Відео: Css 3d Flip Button Hover Effect - Pure Css Tutorial

-webkit-box-shadow: 0px 6px 0px # 2b638f, 0px 3px 15px rgba(0,0,0,.4)--moz-box-shadow: 0px 6px 0px # 2b638f, 0px 3px 15px rgba(0,0,0,.4)-box-shadow: 0px 6px 0px # 2b638f, 0px 3px 15px rgba(0,0,0,.4)-

Відео: Анімовані кнопки для сайту - графіка і CSS

Зараз у нашій кнопки присутній ефект обсягу. Ви можете переконатися в цьому на зображенні нижчі:

Ще більше тіней

Додамо ще тіней для більш реалістичного відображення кнопки:

-webkit-box-shadow: 0px 6px 0px # 2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5)--moz-box-shadow: 0px 6px 0px # 2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5)-box-shadow: 0px 6px 0px # 2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5)-

В результаті отримали:

Анімація при кліці

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

123456789101112131415

.button: active {background-image: linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%)-background-image: -o-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%)-background-image: -moz-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%)-background-image: -webkit-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%)-background-image: -ms-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%)-background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(88,154,204)),color-stop(1, rgb(90,150,199)))-}

Додамо тіні, для більшої реалістичності:

-webkit-box-shadow: 0px 2px 0px # 2b638f, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5)--moz-box-shadow: 0px 2px 0px # 2b638f, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5)-box-shadow: 0px 2px 0px # 2b638f, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5)-

Зміна розміру форми при натисканні

При натисканні на кнопку, щоб зберегти ефект обсягу, слід зменшити тінь:

123	-webkit-transform: translate(0, 4px)--moz-transform: translate(0, 4px)-transform: translate(0, 4px)-

Додаємо анімацію при натисканні

Зараз після натискання, кнопка повертається у вихідне положення дуже швидко. Мовчимо це дія, для того щоб зробити більш красивий ефект:

123	-webkit-transition: all .1s ease-in-out--moz-transition: all .2s ease-in-out-transition: all .2s ease-in-out-

Зараз кнопка приходить в початковий стан як ми і хотіли.

трохи 3D

Ми можемо зробити кнопку ще більш незвичайною, додавши їй властивості 3D перетворення:

1234	body {...-webkit-perspective: 400-}

Шкода це властивість не працює у всіх браузерах як треба.

І останнє що ми зробимо, це додамо ефект для кнопки:

1234	.button {...-webkit-transform: rotateX(20deg)-}

Зараз створюється враження що кнопка дійсно знаходиться в тривимірному вимірюванні (тестируйте в браузері Chrome):

висновки

Протягом цієї статті ми створили дуже гарну анімовану 3D кнопку за допомогою чистого CSS3 без застосування javascript. Безумовно такі кнопки підвищують якість сайту. використовуйте її # 128578;

Успіхів!

джерело: designmodo.com

Поділися в соц мережах: