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

Яблоковский дизайн всегда был весьма популярен среди моих клиентов. Когда дело доходит до оформления, мне часто говорят: «нужен простой дизайн со светло-серым фоном» и приводят в пример 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.

Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

Смотрите также

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

  • Янннн28 ноября 2012 в 22:11 #

    Здравствуйте. Учитывая то, что я ярый фанат Эпл - это чрезвычайно интересный и полезный для меня пост. Спасибо большое:)

  • Cогдиана14 февраля 2013 в 21:02 #

    Здравствуйте! Подскажите пожалуйста, как можно это сделать такие кнопки для вордпресс? Заранее спасибо.

    • Миша16 февраля 2013 в 13:02 #

      Добрый день)
      да

      • Cогдиана17 февраля 2013 в 18:02 #

        Привет Миша! Посмотрите эту страницу http://travelca.ru/kyrgyzstan. Есть ссылки подробнее. Я бы хотела сделать такие же кнопки в стиле Apple для этой ссылке. Подскажите пожалуйста, как это сделать на вордпресс. Спасибо.

      • Миша17 февраля 2013 в 18:02 #

        Привет)
        в общем добавляйтесь в скайп, я всё покажу

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
Получайте новости блога по email или следите за мной в социальных сетях.
  • Vladislav: Подправил имеющийся у меня код, по вашим рекомендациям, миниатюры начали отображаться, но они стали очень огромными, что...

  • Миша: Лишь предложил решение. Думаю можно нашаманить и так, чтобы чисто для рубрик было, не уверен только, что обойдётся без и...

  • Алексей: так надо комментарии в рубриках, а не на страницах в category.php а не в page.php

  • Миша: Здравствуйте! Сам WordPress это не поддерживает, но можно пойти хитрым путём. Первое, что пришло мне в голову, это:...

  • Алексей: Миша, здравствуйте! Подскажите, пожалуйста, что нужно, чтобы сделать комментарии на страницах рубрик. Я когда то давно...