Создание css3 кнопки Apple

23 Ноя
2011

Эту кнопку вы можете наблюдать на официальном сайте Apple, а в 2010 Peter Vidani признал ее Кнопкой Года!



При проектировании кнопки и всего сайта, важно определиться с источник света на вашей странице. В данном примере свет исходит сверху в низ, следовательно и цвет кнопки будет идти от светлого к темному, так же будет присутствовать небольшая тень под кнопкой.

Код для нормального состояния кнопки.

Мы используем CSS3 цвет фона для Mozilla и WebKit отдельно.

button {
  background: #3b88d8;
  background: -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));}


Далее, мы добавляем цвет границы. Т.к свет падает сверху в низ, следовательно верхняя граница светлее, чем нижняя, а боковые цвета имеют среднее значение.

button {
  border-top: 1px solid #4081af;
  border-right: 1px solid #2e69a3;
  border-bottom: 1px solid #20559a;
  border-left: 1px solid #2e69a3;
}



Затем мы добавляем две тени (box-shadows):

button {
  -moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
  -webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
}


Затем мы добавляем небольшие тени в верхней части текста

button {
  text-shadow: 0 -1px 1px #3275bc;
}


Наведенное состояние(hover):



При наведении курсора кнопка и текст должны немного потемнеть, а также должен измениться стиль курсора

button:hover {
  background: #2a81d7;
  background: -moz-linear-gradient(0% 100% 90deg, #206bcb, #3e9ee5);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3e9ee5), to(#206bcb));
  border-top: 1px solid #2a73a6;
  border-right: 1px solid #165899;
  border-bottom: 1px solid #07428f;
  border-left: 1px solid #165899;
  -moz-box-shadow: inset 0 1px 0 0 #62b1e9;
  -webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
  cursor: pointer;
  text-shadow: 0 -1px 1px #1d62ab;
}


Активное состояние:



button:active {
  background: #3282d3;
  border: 1px solid #154c8c;
  border-bottom: 1px solid #0e408e;
  -moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
  -webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
  text-shadow: 0 -1px 1px #2361a4;
}


Отключенное состояние:



<button disabled="disabled">Download iTunes</button>


Полностью меняем цвет, а также меняем стиль курсора

button[disabled],
button[disabled]:hover,
button[disabled]:active {
  background: #999;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dadada), to(#f3f3f3));
  border-top: 1px solid #c5c5c5;
  border-right: 1px solid #cecece;
  border-bottom: 1px solid #d9d9d9;
  border-left: 1px solid #cecece;
  color: #8f8f8f;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  cursor: not-allowed;
  text-shadow: 0 -1px 1px #ebebeb;
}
По материалам Хабрахабр.



загрузка...

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

Наверх