[X] Помощник

[TimurR Topic Starter]

Всем привет. Эта статья ориентирована на новичков, которые часто задаются вопросами, о реализации кнопок на CSS. Я решил показать один из множества способов создания "живой" кнопки в стиле flat, который сейчас очень популярен. Также мы познакомимся с псевдоэлементом CSS :active. Этот псевдоэлемент позволяет задавать стили элементам html в момента клика ПКМ по ним. 

Из чего будут наши кнопки? Пожалуй, это не кнопки, а ссылки оформленные в стиле кнопки, но ничего не мешает оформить точно также элемент button. У нас будет основной элемент <a> (ссылка) и внутри него будет элемент <p>, внутри которого будет заключен анкор ссылки, над которым мы будем немного оперировать. 

Создадим несколько ссылок по нашей задумке:

  <a href="#" class="button color_1"><p>Перейти</p></a>
  <a href="#" class="button color_2"><p>Перейти</p></a>
  <a href="#" class="button color_3"><p>Перейти</p></a>
  <a href="#" class="button color_4"><p>Перейти</p></a>

Как видно, у каждой ссылки по два класса, один общий класс, который задает идентичные стили каждой кнопке, и классы color в которых будут параметры цвета. Я решил сделать несколько разноцветных кнопок, просто ради примера. Теперь запишем для них стили в CSS файле:

.button {
	/*задаем ширину и высоту*/
	width: 90px; 
	height: 20px;
	/*отображение кнопки как блочного элемента*/
	display: block;
	/*отступы, можете варьировать под свои нужды*/
	margin: 20px 190px;
	/*отменяем подчеркивание ссылки*/
	text-decoration: none;
	/*записываем стили для текста*/
	font: bold  16px "Ubuntu";
	color: #FFF;
	/*задаем внутренние оступы*/
	padding: 10px 20px;
	/*выравниваем текст по центру кнопки*/
	text-align: center;
	/*задаем скругление краев кнопки по 3px*/
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

/*тут мы используем псевдоэлемент active и задаем правило,
при котором если будет произведен клик по области кнопки, то элемент <p>
оступит сверху 1px. Это немного оживит нашу кнопку, по такому принципу
работают кнопки в Вконтакте.*/
.button:active p{
	padding-top: 1px;
}
/*тут мы задаем каждой кнопки отдельно фон и тень*/
.color_1 {background: #9b59b6; box-shadow: 0 3px 0 #8e44ad;}
.color_2 {background: #e74c3c; box-shadow: 0 3px 0 #c0392b;}
.color_3 {background: #2ecc71; box-shadow: 0 3px 0 #27ae60;}
.color_4 {background: #34495e; box-shadow: 0 3px 0 #2c3e50;}

Посмотрите результат в браузере, должно получиться красиво. Можете поиграть в размерами кнопки, если вас не устраивает решение с элементом <p> в <a> можете попробовать реализовать при помощи других элементов. Моя статья по верстке меню по мотивам меню MasterWEBS.


Сообщение отредактировал TimurR - 16.1.2015, 14:13

[Maksimov1989]

[member=TimurR], Вот, очередной поучительный пост, а не бла бла, этот форум мне нравится все больше и больше. Спасибо вам и всем, кто делится опытом с менее опытными представителями этого прекрасного места. :smile-thumb-up: :smile-thumb-up: :smile-thumb-up:

[kamchatniyoleg]

:) спасибо, даже одну заберу себе =) 

[Layer]

Прикольная вещь спасиб.

[FIvYur]

Что сказать...
Если коротко - понравилось.
Если полнее - то довольно все понятно, разложено по полочкам и нет лишней воды.

[Info-Mans]

Отличный способ)

[TimurR Topic Starter]

Спасибо, друзья, меня мотивирует, что кому-то это пригодилось. 

[Blakeev_mw]

Ух ты, спасибо!

А за $$$ вознаграждение $$$ сможете сделать под заказ подобное?  

[TimurR Topic Starter]

[member=Blakeev], Разумеется, это моя работа.  

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.