Швидка установка кнопок css

Швидке встановлення кнопок CSS

У зв`язку з новими змінами в області дизайну багато хто не дуже хочуть міняти дизайн своїх сайтів, тому що міняти потрібно дуже багато. Але сьогодні Ви побачите кнопки CSS, які підійдуть і для тих, у кого дизайн сайту ще не в стилі мінімалізму. Кнопки виглядають об`ємно, так як при натисканні одна частина кнопки CSS опускається, а інший залишається незмінною.

Кнопки CSS можна подивитися в «живому» вигляді за такими адресами:

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

Що ще з CSS кнопок є на сайті:

  • Анімовані кнопки на CSS3
  • Глянцеві кнопки за допомогою CSS3 градієнта
  • Ефект 3D кнопки на CSS3 використовуючи 3D Transform

Нижче Ви можете просто копіювати HTML і відповідний, що сподобалася кнопці, CSS стиль, а потім вставляти на свій сайт.

1-й варіант кнопки

Найпростіший варіант кнопки. Зовні кнопка виглядає ось так:

Демо - Варіант кнопки 1

HTML розмітка

Використовуємо звичайне посилання з класом a_demo_one:

123
lt;a href="#" class="A_demo_one"gt; Натисни на мене!lt;/agt;

CSS оформлення



Код стилів буде великим, тому що йде з усіма префіксами. Крім основного стану, є ще два: before і active. А ось, власне, самі стилі:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
.a_demo_one {background-color:# 3bb3e0-padding:10px-position:relative-font-family: sans-serif-font-size:12px-text-decoration:none-color:#fff-border: solid 1px # 186f8f-background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)-background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)-background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)-background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)-background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)-background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(44,160,202)),color-stop(1, rgb(62,184,229)))--webkit-box-shadow: inset 0px 1px 0px # 7fd2f1, 0px 1px 0px #fff--moz-box-shadow: inset 0px 1px 0px # 7fd2f1, 0px 1px 0px #fff-box-shadow: inset 0px 1px 0px # 7fd2f1, 0px 1px 0px #fff--webkit-border-radius: 5px--moz-border-radius: 5px--o-border-radius: 5px-border-radius: 5px-}.a_demo_one:: before {background-color:# ccd0d5-content:""-display:block-position:absolute-width:100%-height:100%-padding:8px-left:-8px-top:-8px-z-index:-1--webkit-border-radius: 5px--moz-border-radius: 5px--o-border-radius: 5px-border-radius: 5px--webkit-box-shadow: inset 0px 1px 1px # 909193, 0px 1px 0px #fff--moz-box-shadow: inset 0px 1px 1px # 909193, 0px 1px 0px #fff--o-box-shadow: inset 0px 1px 1px # 909193, 0px 1px 0px #fff-box-shadow: inset 0px 1px 1px # 909193, 0px 1px 0px #fff-}.a_demo_one: active {padding-bottom:9px-padding-left:10px-padding-right:10px-padding-top:11px-top:1px-background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%)-background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%)-background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%)-background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%)-background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%)-background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(62,184,229)),color-stop(1, rgb(44,160,202)))-}

2-й варіант кнопки

Тут вже спостерігається обсяг і при кліці кнопка опускається:

Демо - Варіант кнопки 2

HTML розмітка

Клас посилання міняється на a_demo_two, тобто тільки остання частина назви класу:

123
lt;a href="#" class="A_demo_two"gt; Другий варіант кнопки!lt;/agt;

CSS оформлення

Стилів для цієї кнопки також не менше, аніж для минулого, але ці стилі повністю готові і Ви можете їх копіювати і потім вставляти на сайт:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
.a_demo_two {background-color:# 3bb3e0-padding:10px-position:relative-font-family: sans-serif-font-size:12px-text-decoration:none-color:#fff-background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)-background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)-background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)-background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)-background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)-background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(44,160,202)),color-stop(1, rgb(62,184,229)))--webkit-box-shadow: inset 0px 1px 0px # 7fd2f1, 0px 6px 0px # 156785--moz-box-shadow: inset 0px 1px 0px # 7fd2f1, 0px 6px 0px # 156785--o-box-shadow: inset 0px 1px 0px # 7fd2f1, 0px 6px 0px # 156785-box-shadow: inset 0px 1px 0px # 7fd2f1, 0px 6px 0px # 156785--webkit-border-radius: 5px--moz-border-radius: 5px--o-border-radius: 5px-border-radius: 5px-}.a_demo_two:: before {background-color:# 072239-content:""-display:block-position:absolute-width:100%-height:100%-padding-left:2px-padding-right:2px-padding-bottom:4px-left:-2px-top:5px-z-index:-1--webkit-border-radius: 6px--moz-border-radius: 6px--o-border-radius: 6px-border-radius: 6px--webkit-box-shadow: 0px 1px 0px #fff--moz-box-shadow: 0px 1px 0px #fff--o-box-shadow: 0px 1px 0px #fff-box-shadow: 0px 1px 0px #fff-}.a_demo_two: active {color:# 156785-text-shadow: 0px 1px 1px rgba(255,255,255,0.3)-background:rgb(44,160,202)--webkit-box-shadow: inset 0px 1px 0px # 7fd2f1, inset 0px -1px 0px # 156785--moz-box-shadow: inset 0px 1px 0px # 7fd2f1, inset 0px -1px 0px # 156785--o-box-shadow: inset 0px 1px 0px # 7fd2f1, inset 0px -1px 0px # 156785-box-shadow: inset 0px 1px 0px # 7fd2f1, inset 0px -1px 0px # 156785-top:7px-}.a_demo_two: active:: before {top:-2px-}

3-й варіант кнопки

Далі йде більш цікавий варіант кнопки css:

Демо - Варіант кнопки 3

HTML розмітка

У цьому випадку посилання має клас a_demo_three:

123
lt;a href="#" class="A_demo_three"gt; Натисни!lt;/agt;

CSS оформлення

У 3-му варіанті стилів ще більше, тому що ще необхідно розмістити нумерацію кнопок зліва за допомогою властивості content:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
.a_demo_three {background-color:# 3bb3e0-font-family: sans-serif-font-size:12px-text-decoration:none-color:#fff-position:relative-padding:10px 20px-border-left:solid 1px # 2ab7ec-margin-left:35px-background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)-background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)-background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)-background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)-background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)-background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(44,160,202)),color-stop(1, rgb(62,184,229)))--webkit-border-top-right; radius: 5px--webkit-border-bottom-right; radius: 5px--moz-border-radius-topright: 5px--moz-border-radius-bottomright: 5px-border-top-right; radius: 5px-border-bottom-right; radius: 5px--webkit-box-shadow: inset 0px 1px 0px # 2ab7ec, 0px 5px 0px 0px # 156785, 0px 10px 5px # 999--moz-box-shadow: inset 0px 1px 0px # 2ab7ec, 0px 5px 0px 0px # 156785, 0px 10px 5px # 999--o-box-shadow: inset 0px 1px 0px # 2ab7ec, 0px 5px 0px 0px # 156785, 0px 10px 5px # 999-box-shadow: inset 0px 1px 0px # 2ab7ec, 0px 5px 0px 0px # 156785, 0px 10px 5px # 999-}.a_demo_three: active {top:3px-background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%)-background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%)-background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%)-background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,Поділися в соц мережах: 
Cхоже
Як створити красиву іконку на css3Як створити красиву іконку на css3
«Хлібні крихти» як у google«Хлібні крихти» як у google
Глянсові кнопки за допомогою css3 градієнтаГлянсові кнопки за допомогою css3 градієнта
Простими підказками на css3 і jqueryПростими підказками на css3 і jquery
Приголомшлива анімована 3d кнопка на css3Приголомшлива анімована 3d кнопка на css3
Меню, що випадає на css3Меню, що випадає на css3
Ефект 3d кнопки на css3 використовуючи 3d transformЕфект 3d кнопки на css3 використовуючи 3d transform
Перевірка заповнення форми на html5 + css3Перевірка заповнення форми на html5 + css3
Відмінна форма входу на html5 і css3Відмінна форма входу на html5 і css3
Анімовані кнопки з бульбашками на css3Анімовані кнопки з бульбашками на css3
Межі css використовуючи градієнт - оформлення кордону на cssМежі css використовуючи градієнт - оформлення кордону на css
Заховані кути на css3Заховані кути на css3
Форма зворотнього зв`язку html - створення форми зворотного зв`язкуФорма зворотнього зв`язку html - створення форми зворотного зв`язку
Об`ємна форма пошуку на css3Об`ємна форма пошуку на css3
Форма реєстрації та входу на css3 + html5Форма реєстрації та входу на css3 + html5
Розсувний слайдер тільки на css3Розсувний слайдер тільки на css3
Приголомшливі ефекти css3 при наведенніПриголомшливі ефекти css3 при наведенні
Анімовані кнопки на css3Анімовані кнопки на css3
Підказки css3Підказки css3
Зошит в лінійку на css3Зошит в лінійку на css3

Увага, тільки СЬОГОДНІ!