CSS-кнопки в стиле Apple

CSS / 6 комментариев

Яблоковский дизайн всегда был весьма популярен среди моих клиентов. Когда дело доходит до оформления, мне часто говорят: «нужен простой дизайн со светло-серым фоном» и приводят в пример apple.com

Если вы немного полазиете по их сайту, то найдёте весьма симпатичные синие кнопки. Там они сделаны в виде CSS-спрайтов, поэтому если вы захотите такие же на свой сайт, то придётся юзать фотошоп.

Однако есть и другой выход — дочитать эту статью до конца :)

Итак выкладываю кнопки на чистом CSS:

.apple-button{
	cursor:pointer;
	padding:3px 10px;
	text-decoration:none;
	color:#fff;
	font-size:13px;
	text-shadow:0 -1px 1px rgba(0,0,0,.3);
	background-image:-webkit-linear-gradient(#52A8E8, #377AD0);
	background-image:-moz-linear-gradient(0% 100% 90deg,#377AD0, #52A8E8);
	background-image: -o-linear-gradient(rgb(82,168,232),rgb(55,122,208));
	background-color:#52A8E8;
	-moz-border-radius:23px;
	-webkit-border-radius:23px;
	border-radius:23px;
	border:1px solid #20559A;
	box-shadow:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
 
.apple-button:hover, .apple-button:focus{
	background-image:-webkit-linear-gradient(#54A1D8, #1967CA);
	background-image:-moz-linear-gradient(0% 100% 90deg,#1967CA, #54A1D8);
	background-image: -o-linear-gradient(rgb(84,161,216),rgb(25,103,202));
	background-color:#52A8E8;box-shadow:0 1px 0 rgba(255,255,255,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
 
.apple-button:active{
	background-color:#2D7CD1;
	box-shadow:0 1px 1px rgba(255,255,255,.5), inset 0 2px 5px rgba(0,0,100,.5);
}

Демо: живой пример (попробуйте навести на него курсор и понажимать)

Пример кнопки

Пару слов о кроссбраузерности. Так как мы использовали CSS-свойство gradient, то могут возникнуть некоторые проблемы при отображении в старых версиях браузера Opera, ну и box-shadow — это свойство CSS 3.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Комментарии — 6

Янннн 28 Ноя 2012
Здравствуйте. Учитывая то, что я ярый фанат Эпл - это чрезвычайно интересный и полезный для меня пост. Спасибо большое:)
- Миша 29 Ноя 2012
  Привет) пожалуйста, рад помочь)
Cогдиана 14 Фев 2013
Здравствуйте! Подскажите пожалуйста, как можно это сделать такие кнопки для вордпресс? Заранее спасибо.
- Миша 16 Фев 2013
  Добрый день)
  да
  - Cогдиана 17 Фев 2013
    Привет Миша! Посмотрите эту страницу http://travelca.ru/kyrgyzstan. Есть ссылки подробнее. Я бы хотела сделать такие же кнопки в стиле Apple для этой ссылке. Подскажите пожалуйста, как это сделать на вордпресс. Спасибо.
  - Миша 17 Фев 2013
    Привет)
    в общем добавляйтесь в скайп, я всё покажу

Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.