Как легко и быстро создать кнопки при помощи CSS3

Как легко и быстро создать кнопки при помощи CSS3 Этот урок будет полезен для тех, кто только начинает свою деятельность как веб разработчик.

Сегодня мы рассмотрим простую технику создания кнопок при помощи CSS3 и HTML.

И так, как вы видите на рисунке выше, мы будем с вами создавать 3 кнопки разных цветов: зелёную, синию и серую. Конечно же, как и подобает всем кнопкам мы опишем 3 её основных состояние : нормальное, когда на кнопку наведён курсор и когда кнопка нажата.

Сначала создадим папку, а в ней два файла. Первый файл будет index.html, а второй style.css.

В index.html мы будем описывать только то, как выглядят наши кнопки при помощи HTML кода.

В файле style.css мы опишем все основные стили.

Для тех, кто не хочет заморачиваться с двумя файлами. Вы можете их объединить, создав только один главный файл index.html. а все основные стили внести в раздел style при помощи специального тэга.

Делайте как вам удобно.

И так приступим, наш HTML код будет выглядеть следующим образом

<a href="#" class="button green">button</a>
<a href="#" class="button blue">button</a>
<a href="#" class="button gray">button</a>

Ничего сложного просто 3 отдельных div с 2-мя классами.

Опишем основные стили.

/*Основной класс*/
.button {
	display: inline-block;
	position: relative;
	margin: 10px;
	padding: 0 20px;
	text-align: center;
	text-decoration: none;
	font: bold 12px/25px Arial, sans-serif;
}
/*Опишем каждый цвет*/
/*Зелёный*/
.green {
	color: #3e5706;
	background: #a5cd4e;
}

/*Синий*/
.blue {
	color: #19667d;
	background: #70c9e3;
}

/*Серый*/
.gray {
	color: #515151;
	background: #d3d3d3;
}

После небольших махинаций наши кнопку примут следующий вид.Наши кнопку примут следующий вид

Теперь зададим специальные стили, которые превратят наши простые прямоугольные кнопки в красивые утончённые кнопки.

Добавим следующие строки в файл style.css

/*Описание основного класса кнопки слегка изменилось*/
.button {
	display: inline-block;
	position: relative;
	margin: 10px;
	padding: 0 20px;
	text-align: center;
	text-decoration: none;
	font: bold 12px/25px Arial, sans-serif;

	text-shadow: 1px 1px 1px rgba(255,255,255, .22);

	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;

	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
	box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	transition: all 0.15s ease;
}
/*Описание цветов также стало другим, более сложным*/

/* Зелёная кнопка */

.green {
	color: #3e5706;

	background: #a5cd4e; /* Old browsers */
	background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
	background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* W3C */
}

/* Синяя кнопка */

.blue {
	color: #19667d;

	background: #70c9e3; /* Old browsers */
	background: -moz-linear-gradient(top,  #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* IE10+ */
	background: linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* W3C */
}

/* Серая кнопка */

.gray {
	color: #515151;

	background: #d3d3d3; /* Old browsers */
	background: -moz-linear-gradient(top,  #d3d3d3 0%, #8a8a8a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* IE10+ */
	background: linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* W3C */
}

Как видно, мы должны были задать следующие эффекты

И так, наши маленькие кнопки готовы. Теперь создадим большие кнопки.

Сначала опишем наш HTML код.

<a href="#" class="button big green">sign in <span>One minute</span></a>
<a href="#" class="button big blue">sign in <span>One minute</span></a>
<a href="#" class="button big gray">sign in <span>One minute</span></a>

Опять же ничего сложного, всё как и в прошлый раз, только к классам прибавился ещё один класс — Big , сигнализирующий о том, что кнопки будут большими.

Опишем этот класс в файле стилей.

/* Описание стиля для большой кнопки */

.big {
	padding: 0 40px;
	padding-top: 10px;
	height: 45px;
	text-transform: uppercase;
	font: bold 20px/22px Arial, sans-serif;
}

.big span {
	display: block;
	text-transform: none;
	font: italic normal 12px/18px Georgia, sans-serif;
	text-shadow: 1px 1px 1px rgba(255,255,255, .12);
}

А теперь опишем ещё 2 основных состояния кнопок: активное и с наведённым курсором.

Состояние Hover

.button:hover {
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
	box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
}

Состояние Active

.button:active {
	-webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
	-moz-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
	box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
}

Урок написан designmodo.



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *