Кожен веб майстер хоче зробити свій сайт стильним, для цього знадобитися гарна кнопка з ефектами CSS 3. Моя  гарна кнопка з ефектами CSS 3, при кліку на неї створює ефект натискання. І так, що потрібно, щоб у нас вийшла гарна кнопка з ефектами CSS 3? Насправді зовсім небагато, трошки коду і бажання.

Ось як вона буде виглядати гарна кнопка з ефектами CSS 3, на мал.1 ви бачите 1-ну кнопку  в спокійному і в натиснутому станах:

гарна кнопка з ефектами CSS 3

Красивая кнопка с эффектами CSS 3

мал.1

Для того що б зробити гарну кнопку з ефектами CSS 3, нам знадобитися index.html і styles.css. Як створити index.html, і підключитидо нього styles.css, читайте в статті CSS 3 и HTML 5 с нуля (Урок №1)

Відкрийте порожній index.html і скопіюйте туди код кнопки:

<!doctype html>

<head>
<meta charset="UTF-8">
<title>Уроки от WCDT</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<a href="#" class="a_demo_one">Моя кнопка</a>
</body>
</html>

гарна кнопка з ефектами CSS 3, отримала класс під назвою a_demo_one

Ви напевно помітили, що клас a_demo_one, повтаряеться кілька разів. Конкретніше, гарна кнопка з ефектами CSS 3, має стиль з трьох частин:
  1. a_demo_one – стиль кнопки в спокійному стані;
  2. a_demo_one: hover – додатковий стиль кнопки при наведення на неї курсора, тінь і рамка темнішають (: hover – визначає стиль елемента при наведенні на нього курсора миші, але при цьому елемент ще не активовано, іншими словами кнопка миші не натиснута.);
  3. a_demo_one: active – це стиль кнопки при натискання, в ньому кольору градієнта, міняються місцями, створюючи ілюзію натискання (: active – псевдокласс, визначає стиль для активного посилання. Активною посилання стає при натисканні нанеї.);

Відкрийте styles.css, і скопіюйте туди стиль кнопки: 

body {background:#fff;text-align:center;}
@charset "UTF-8";
.a_demo_one {
	top:10px;
	border: 1px solid #4C9E00;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 0 #BFD255 inset, 0 1px 0 #BFD255;
    color: #FFFFFF;
	text-shadow: 1px 1px 1px rgba(100, 100, 100, 1);
    font-family: 'Open Sans',sans-serif;
    font-size: 16px;
    padding: 15px 20px;
    position: absolute;
    text-decoration: none;
	background-image: linear-gradient(top,  rgb(157,188,77) 0%, rgb(114,170,0) 100%);
	background-image: -o-linear-gradient(top,  rgb(157,188,77) 0%, rgb(114,170,0) 100%);
	background-image: -moz-linear-gradient(top,  rgb(157,188,77) 0%, rgb(114,170,0) 100%);
	background-image: -webkit-linear-gradient(top,  rgb(157,188,77) 0%, rgb(114,170,0) 100%);
	background-image: -ms-linear-gradient(top,  rgb(157,188,77) 0%, rgb(114,170,0) 100%);
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(157,188,77)),
	color-stop(1, rgb(114,170,0))
	);

}

.a_demo_one:hover {
	color: #fff;
	text-shadow: 1px 1px 1px rgba(50, 50, 50, 1);	
	}

.a_demo_one:active {
	top:10px;
	border: 1px solid #4C9E00;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 0 #BFD255 inset, 0 1px 0 #BFD255;
    color: #FFFFFF;
    font-family: 'Open Sans',sans-serif;
    font-size: 16px;
    padding: 16px 20px 14px 20px;
	position: absolute;
    text-decoration: none;
	background-image: linear-gradient(top,  rgb(157,188,77) 0%, rgb(114,170,0) 100%);
	background-image: -o-linear-gradient(top,  rgb(157,188,77) 0%, rgb(114,170,0) 100%);
	background-image: -moz-linear-gradient(top,  rgb(157,188,77) 0%, rgb(114,170,0) 100%);
	background-image: -webkit-linear-gradient(top,  rgb(157,188,77) 0%, rgb(114,170,0) 100%);
	background-image: -ms-linear-gradient(top,  rgb(157,188,77) 0%, rgb(114,170,0) 100%);
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(157,188,77)),
	color-stop(1, rgb(114,170,0))
}

гарна кнопка з ефектами CSS 3

гарна кнопка з ефектами CSS 3, завдяки градієнту при кліці, створює ефект натискання. Роблячи кнопку з цього уроку, виможете використовувати інший градієнт, але пам’ятайте в стилі active, потрібно поміняти місцями кольори градієнта. Також  забудьте поміняти колір border і box-shadow, відповідно до вашого градієнту. Градієнт можете ссоздать за допомогою CSS 3, створивши його наприклад в онлайн генераторі, або за допомогою малюнка, точніше двох 1px малюнків. У стилі кнопки в спокійному стані, клонуєте 1px малюнок градіента по горизонталі, а в стилі актив, клонуєте 1px малюнок градіента малюнок, але перевернутий вверх ногами. Детально, як це зробити, читайте статті Як зробити градієнтний background (фон) за допомогою 1px малюнка і з допомогою тільки CSS 3