Верстаємо круглі кнопки на css3.

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

відкриємо файл index.html і створимо простеньку структуру

 
lang="Ru"gt; 




 
charset="UTF-8"gt; 
CSS3 Buttons 
rel="Stylesheet"href="Style.css"gt; 
 
 
class="Button"gt; 
class="Button"gt; 
class="Button"gt;

Нічого особливого. просто 3 блоку з класом .button Перейдемо тепер до стилів.

body { 
 background: url(http://subtlepatterns.com/patterns/extra_clean_paper.jpg)- 
} 
 
.button { 
 display:inline-block- 
 margin:40px- 
 width:100px- 
 height:100px- 
 background: url(http://subtlepatterns.com/patterns/extra_clean_paper.jpg)- 
 cursor: pointer- 
 border-radius:50% - 
 
 box-shadow:03px20px rgba(0,0,0,.25), 
 inset 02px0 rgba(255,255,255,.6), 
02px0 rgba(0,0,0,.1), 
 inset 0020px rgba(0,0,0,.1) - 
}

Фон для документа і наших кнопок я взяв з сайту subtlepatterns.com.

Ми робимо наші div рядково-блоковими, щоб вони вишикувалися по горизонталі, задаємо їм висоту, ширину, відступ від країв браузера, скругление 50%, щоб отримати коло, і при наведенні курсор робимо pointer. Тут немає нічого складного, але тінь я не дарма відділив в стилях, тому що це саме та частина, яка може викликати труднощі, хоча, там теж все просто, і це ви зараз побачите.

Задавши першу тінь, ми вже побачимо контур нашого кола:

Відео: Створення кнопок для сайту на CSS3

box-shadow:03px20px rgba(0,0,0,.25) -

контур кола

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

box-shadow:03px20px rgba(0,0,0,.25), 
inset 02px0 rgba(255,255,255,.6) -

Контур кола з оконтовочкой

Наступна зовнішня тінь потрібна для того, щоб трохи затемнити місце під кнопкою знизу, а наступна внутрішня затемнює простір всередині кнопки для більшого ефекту)

box-shadow:03px20px rgba(0,0,0,.25), 
inset 02px0 rgba(255,255,255,.6), 
02px0 rgba(0,0,0,.1), 
inset 0020px rgba(0,0,0,.1) -

Як бачите, по-початку здається складно, багато властивостей, але, якщо розібратися, то все виявляється набагато простіше. Отже, ось наш кінцевий результат:

Відео: Об`ємна кнопка на CSS3

готова кнопка

Тепер реалізуємо поведінку при наведенні на блок

.button:hover { 
 box-shadow: inset 0020px rgba(0,0,0,.2), 
02px0 rgba(255,255,255,.4), 
 inset 02px0 rgba(0,0,0,.1) - 
}

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

Відео: HTML & CSS3 кнопки для сайту

Кнопка при наведенні

Нарешті, давайте додамо іконки нашим кнопок, щоб було не дуже нудно. Для цього змінимо трохи html

class="Button btn-photo"gt; 
class="Button btn-settings"gt; 
class="Button btn-tag"gt;

Ми просто додали додатковий клас для кожної кнопки і тепер давайте задамо стилі для них

.btn-photo { 
 background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-camera-photo_0.jpg) center center no-repeat- 
} 
 
.btn-settings { 
 background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/settings.jpg) center center no-repeat- 
} 
 
.btn-tag { 
 background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/tag.jpg) center center no-repeat- 
}