Прелестная кнопка на CSS3

Кнопки являются популярным способом взаимодействия с электронными устройствами, таким как радио, телевизоры, плееры и даже смартфоны, которые все еще нуждаются в одной или двух кнопках.

В нашу цифровую эпоху кнопки также приобретают цифровую форму, что делает их более интерактивными, динамическими и простыми в использовании, по сравнению с физическими кнопками.

В данном уроке мы создадим очаровательную интерактивную кнопку с помощью CSS.

 

Разметка HTML

Начнем делать кнопку с размещения соответствующей разметки в нашем HTML документе. Она очень простая. Кнопка строится на основе тега ссылки, также мы добавляем элемент span для создания индикатора, и все оборачивается в тег HTML5 section.

<section>
	<a rel="external" href="#button" id="button">&#xF011;</a>
	<span></span>
</section>

Вот так будет выглядеть наша кнопка.

Основные стили

Для начала добавим темный фон для документа и выставим элемент section в центре. Затем удалим точечную обводку  outline для состояний ссылки :focus и :active.

body {
	background: url('images/micro_carbon.png');
}
section {
	margin: 150px auto 0;
	width: 75px;
	height: 95px;
	position: relative;
	text-align: center;
}
:active, :focus {
	outline: 0;
}

Шрифт для символа

Для символа иконки мы будем использовать специальный шрифт Awesome, а не изображение. Для такой иконки легко изменять стиль и масштаб с помощью команд CSS.

После загрузки файлов шрифта  (eot, woff, ttf и svg) в папке fonts, нужно разместить следующий код в таблице стилей для определения нового семейства шрифта.

@font-face {
  font-family: "FontAwesome";
  src: url("fonts/fontawesome-webfont.eot");
  src: url("fonts/fontawesome-webfont.eot?#iefix") format('eot'),
  	   url("fonts/fontawesome-webfont.woff") format('woff'),
  	   url("fonts/fontawesome-webfont.ttf") format('truetype'),
  	   url("fonts/fontawesome-webfont.svg#FontAwesome") format('svg');
  font-weight: normal;
  font-style: normal;
}

Иконка символа включения, которую мы используем в нашем примере, имеет код F011. В выше приведенной разметке HTML в теге ссылки используется  &#xF011; , но иконка будет корректно выводиться после определения свойства font-family в стилях кнопки.

 

Стили кнопки

Сначала нужно определить свойство font-family для кнопки.

Наша кнопка будет круглой. Ее форма создается с помощью эффекта использования для свойства  border-radius значения половины ширины кнопки.

Так как мы используем шрифт для иконки мы можем установить цвет color и добавить свойство text-shadow для нее.

Затем мы создаем для кнопки скошенную кромку.  Данный эффект требует небольшого трюка. Сначала нужно установить фоновый цвет background-color: rgb(83,87,93); для основы кнопки, а затем добавляем четыре слоя теней box-shadows.

a {
	font-family: "FontAwesome";
	color: rgb(37,37,37);
	text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
	font-size: 32pt;
	display: block;
	position: relative;
	text-decoration: none;
	background-color: rgb(83,87,93);
    box-shadow: 0px 3px 0px 0px rgb(34,34,34), /* 1st Shadow */
    			0px 7px 10px 0px rgb(17,17,17), /* 1nd Shadow */
    			inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */
    			inset 0px -12px 35px 0px rgba(0, 0, 0, .5); /* 4th Shadow */
	width: 70px;
	height: 70px;
	border: 0;
	border-radius: 35px;
	text-align: center;
	line-height: 79px;
}

Также у нас имеется большой круг снаружи нашей кнопки. Для него используется псевдо-элемент :before.

a:before {
	content: "";
	width: 80px;
	height: 80px;
	display: block;
	z-index: -2;
	position: absolute;
	background-color: rgb(26,27,29);
	left: -5px;
	top: -2px;
	border-radius: 40px;
	box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),
			 	inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}

 

Индикатор

Под кнопкой установлен небольшой индикатор для отображения статуса кнопки. Мы используем красный цвет, так как кнопка изначально выключена. Также добавляем box-shadow для имитации эффекта рассеянного свечения.

a + span {
	display: block;
	width: 8px;
	height: 8px;
	background-color: rgb(226,0,0);
	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
				0px 0px 3px 2px rgba(226,0,0,0.5);
 	border-radius: 4px;
 	clear: both;
 	position: absolute;
 	bottom: 0;
 	left: 42%;
}

 

Эффект

Теперь наша кнопка выглядит прилично и остается только добавить несколько эффектов. Включенная кнопка должна выглядеть нажатой.

Для достижения визуального эффекта сначала свойство box-shadow для кнопки обнуляется и немного изменяется положение. Также настроить интенсивность трех теней для соответствия положения кнопки.

a:active {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34), /* 1st Shadow */
    			0px 3px 7px 0px rgb(17,17,17), /* 2nd Shadow */
    			inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */
    			inset 0px -10px 35px 5px rgba(0, 0, 0, .5); /* 4th Shadow */
    background-color: rgb(83,87,93);
  	top: 3px;
}

Затем, после нажатия кнопка должна оставаться в нажатом положении, а иконка должна светиться для отображения включенного состояния.

Для достижения подобного эффекта мы используем псевдо-класс :target для изменения цвета иконки и добавления свойства text-shadow с белым цветом.

a:target {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
    			0px 3px 7px 0px rgb(17,17,17),
    			inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
    			inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
    background-color: rgb(83,87,93);
  	top: 3px;
  	color: #fff;
  	text-shadow: 0px 0px 3px rgb(250,250,250);
}

Также нужно изменить значение свойства box-shadow для внешнего круга кнопки:

a:active:before, a:target:before {
	top: -5px;
	background-color: rgb(26,27,29);
	box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),
			 	inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}

Индикатор будет изменять свой цвет на зеленый во включенном состоянии.

a:target + span {
	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
				0px 0px 3px 2px rgba(135,187,83,0.5);
	background-color: rgb(135,187,83);
}

 

Эффект перехода

В завершении сделаем эффект плавного включения кнопки.

Ниже приведенный код устанавливает переход значения свойств элемента ссылки  color и text-shadow в течении 350ms.

a {
transition: color 350ms, text-shadow 350ms;
	-o-transition: color 350ms, text-shadow 350ms;
	-moz-transition: color 350ms, text-shadow 350ms;
	-webkit-transition: color 350ms, text-shadow 350ms;
}

А следующий код устанавливает переход свойств background-color и box-shadow для индикатора.

a:target + span {
transition: background-color 350ms, box-shadow 700ms;
	-o-transition: background-color 350ms, box-shadow 700ms;
	-moz-transition: background-color 350ms, box-shadow 700ms;
	-webkit-transition: background-color 350ms, box-shadow 700ms;
}

 

Бонус. Включение и выключение

Если попробовать выше приведенный код, то можно заметить, что кнопка только единожды включается. К сожалению, для реализации функционала включения/выключения придется использовать JavaScript. Применим jQuery.

$(document).ready(function(){
	$('#button').click(function(){
		$(this).toggleClass('on');
	});
});

Выше приведенный код добавляет класс ON к ссылке, для чего используется функция toggleClass. Когда элемент #button нажат, jQuery проверяет наличие класса. Если класс имеется, то jQuery удаляет его, если нет - добавляет.

Примечание: Обязательно подключите библиотеку jQuery.

Нужно немого изменить код CSS. Просто замените все псевдо-элементы :target  на селектор класса .on:

a.on {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
    			0px 3px 7px 0px rgb(17,17,17),
    			inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
    			inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
    background-color: rgb(83,87,93);
  	top: 3px;
 	color: #fff;
  	text-shadow: 0px 0px 3px rgb(250,250,250);
}
a:active:before, a.on:before {
	top: -5px;
	background-color: rgb(26,27,29);
	box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),
			 	inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
a.on + span {
	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
				0px 0px 3px 2px rgba(135,187,83,0.5);
	background-color: rgb(135,187,83);
}


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/yO7YGEZvj8E/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Прелестная кнопка на CSS3 | | 2012-07-23 17:20:47 | | Статьи Web-мастеру | | Кнопки являются популярным способом взаимодействия с электронными устройствами, таким как радио, телевизоры, плееры и даже смартфоны, которые все еще нуждаются в одной или двух кнопках.В нашу | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: