Перейти к содержимому


Партнерская программа Kredov

Делаем симпатичные кнопки на CSS3

#1 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180
7

Отправлено 16 Январь 2015 - 13:12

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

 

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

 

74aa901a8012.jpg

 

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

  <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 Январь 2015 - 13:13

  • 3

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#2 maksimov1989

maksimov1989
  • Пользователь
  • 856 сообщений
  • Репутация: 95

Отправлено 16 Январь 2015 - 13:41

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


  • 0

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



#3 kamchatniyoleg

kamchatniyoleg
  • Пользователь PRO
  • 1 178 сообщений
  • Репутация: 84

Отправлено 16 Январь 2015 - 13:58

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


  • 0
Сервис электронного информирования клиентов PostTrail.ru
Отслеживание посылок Почты России в автоматическом режиме! Лояльность клиента - прибыль магазина!


#4 Layer

Layer
  • Пользователь
  • 246 сообщений
  • Репутация: 18

Отправлено 16 Январь 2015 - 14:06

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


  • 0

#5 FIvYUr

FIvYUr
  • Пользователь
  • 156 сообщений
  • Репутация: 7

Отправлено 16 Январь 2015 - 14:15

Что сказать...

Если коротко - понравилось.

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


  • 0

#6 Info-Mans

Info-Mans
  • Пользователь
  • 1 176 сообщений
  • Репутация: 112

Отправлено 16 Январь 2015 - 17:10

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

»»» Начни изменять свою жизнь с внешнего вида «««
        Буду рад вашим комментариям на блоге!



#7 TimurR

TimurR
    Topic Starter
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 16 Январь 2015 - 18:02

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


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#8 Blakeev

Blakeev
  • Пользователь
  • 21 сообщений
  • Репутация: 0

Отправлено 16 Январь 2015 - 19:37

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

 

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


  • 0

#9 TimurR

TimurR
    Topic Starter
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 16 Январь 2015 - 20:17

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


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru