Каждый веб мастер хочет сделать свой сайт стильным, для этого пригодиться  красивая кнопка с эффектами CSS 3. Моя красивая кнопка с эффектами CSS 3, при клике на нее создает эффект нажатия. И так что нужно что у нас получилась  красивая кнопка с эффектами CSS 3? На самом деле совсем немножно, кода, стиля и желание.

Вот как она будет выглядеть  красивая кнопка с эффектами CSS 3, на рис.1 вы ведите 1 кнопку  в 2 состаяниях, в спокойном и в нажатом состояниях:

 красивая кнопка с эффектами 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 — стиль кнопки в спокойном состаяние;

 

  • a_demo_one:hover — дополнительный стиль кнопки при наведение на нее курсора, тень и рамка темнеют (:hover — определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.);

 

 

  • 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