Верстаємо круглі кнопки на 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-
}
Тут ми просто додаємо другий фон для кожної кнопки, взявши іконки з сайту defaulticon.com.
От і все. Сьогодні ми розглянули, як створити круглі кнопки на CSS3.
- Як зробити анімацію завантаження на чистому css3.
- Як зробити прелоадер на чистому css3.
- Як створити "вислизати" меню на css.
- Як зробити слайдер на чистому css3 без використання jаvascript.
- Як зробити аккордіон на чистому css3.
- Як зробити вигнуту тінь на чистому css3.
- Як зробити красиві анімації на css3 швидко, використовуючи бібліотеку animate.css.
- Як задавати градієнти в css3.
- Як зробити самостійно перегортаються текст на css3.
- Як зробити блоки зі слайдер ефектом на чистому css3.
- Як зробити прогрес бар на чистому css3.
- Як зробити ефект вдавленого тексту на css3.
- Як зробити просту навігацію на html5 і css3.
- Як зробити фотографію з вашої веб-камери на jаvascript.
- Share buttons. Красиві кнопки соц. Мереж.
- Css3 трансформації.
- Тіні для тексту і блоків.
- Функція calc () в css3.
- Закруглені кути на css3.
- Властивість css3 - box-sizing.
- Завдання кольору в css3.