Шпора по CSS 2012.02.29

form.plus_form fieldset input#blog_post_submit,
form.plus_form fieldset input#milestone_submit,

form.plus_form fieldset input[type="submit"] {

input[type="submit"] {


background: -moz-linear-gradient(#AAFF55, #66EE33) repeat scroll 0 0 transparent;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
-khtml-border-radius: 3px; /* KHTML */
border-radius: 3px; /* CSS3 */

___________________________________________________


http://ajc.su/web-razrabotka/sozdanie-css3-knopki-apple/
Создание css3 кнопки Apple 23 Ноя 2011


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

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

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

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

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


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

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

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

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

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

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

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

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

01 button:hover {
02 background: #2a81d7;
03 background: -moz-linear-gradient(0% 100% 90deg, #206bcb, #3e9ee5);
04 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3e9ee5), to(#206bcb));
05 border-top: 1px solid #2a73a6;
06 border-right: 1px solid #165899;
07 border-bottom: 1px solid #07428f;
08 border-left: 1px solid #165899;
09 -moz-box-shadow: inset 0 1px 0 0 #62b1e9;
10 -webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
11 cursor: pointer;
12 text-shadow: 0 -1px 1px #1d62ab;
13 }

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

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

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

1

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

01 button[disabled],
02 button[disabled]:hover,
03 button[disabled]:active {
04 background: #999;
05 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dadada), to(#f3f3f3));
06 border-top: 1px solid #c5c5c5;
07 border-right: 1px solid #cecece;
08 border-bottom: 1px solid #d9d9d9;
09 border-left: 1px solid #cecece;
10 color: #8f8f8f;
11 box-shadow: none;
12 -moz-box-shadow: none;
13 -webkit-box-shadow: none;
14 cursor: not-allowed;
15 text-shadow: 0 -1px 1px #ebebeb;
16 }