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.

Миша

В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

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

Комментирование этого поста более не доступно.
  • Янннн 28 ноября 2012 #

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

    • Миша 29 ноября 2012 #

      Привет) пожалуйста, рад помочь)

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

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

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

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

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

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

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

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