Разработка электронных устройств

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

Прототипы и серийное производство

Разработка и изготовление корпусов и передних панелей. Разработка и изготовление печатных платы любой сложности. Монтаж печатных плат.

Написание программного обеспечения

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

Разработка механизмов различной степени сложности

Проектирование и прототипирование подвижных и неподвижных механизмов и узлов устройств и агрегатов. Полное сопровождение проекта и написание технической литературы

Создание, продвижение и обслуживание сайтов

Написание php/perl/c кода или использование cms. Собственный сервер для размещения Ваших проектов под любые нагрузки. Поддержание сайта в актуальности и продвижение в поисковых системах.

 
 

Красивая кнопка на CSS

Автор: от 13 Январь 2013 года, просмотров 3328

Google

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

Как вы заметили уже, у нас на сайте для открытия полной статьи используется кнопка "подробнее", это просто ссылка, стиль которой описан на ксс, полный текст которой можно найти в конце статьи. Пока разберёмся что и для чего делается. Подробнее

И так, перед нами стоит задача сделать ссылку в виде кнопки, возьмём в пример нашу кнопку подробнее.

Добавим тег ссылки в наш документ, здесь думаю нечего объяснять.

1
2
3
4
5
6
7
<html>
   <head>
   </head>
   <body>
      <a class="button">Подробнее</a>
   </body>
</html>

 ну и сделаем пока разметку наших классов

1
2
3
4
5
6
7
8
9
10
11
/* вид кнопки в состоянии покоя */
.button {
}
 
/* то, когда мы навели на неё курсор */
.button:hover {
}
 
/* стиль для нажатой кнопки */
.button:active {
}

Первым делом займёмся спокойным состоянием нашей кнопки и сделаем её квадратной с закругленными углами(так симпатичнее и под наш дизайн подходит), за одно и определим её размеры.

1
2
3
4
5
6
7
8
9
10
11
12
13
.button {
display:block; /* отобразим в виде квадратного блока */
 
width:95px; /* ширина будущей кнопки */
padding:4px; /* расстояние от грацины до текста */
 
background: rgb(48, 173, 48); /* выберем подходящий нам цвет */
 
border-radius: 7px; /* и выставим закругления границ в 7 пикселей */
/* сделаем тоже самое и для других браузеров */
-moz-border-radius: 7px; 
-webkit-border-radius: 7px; 
}

И так, теперь мы имеем прямоугольник со слегка закругленными углами. Естественно нам этого мало... Теперь сделаем нормальный цвет нашей кнопки с помощью граниента, что позволит придать нашей кнопке не много объёма, и настроем нормальное отображение текста. Нужно лишь добавить эти свойства

1
2
3
4
5
6
7
8
9
10
11
12
13
/* градиентная заливка, начиная сверху от 83BE1E в 6AAB16 цвет */
/* так много для кросбраузерности */
background-image: -webkit-linear-gradient(top, #83BE1E, #6AAB16);
background-image: -moz-linear-gradient(top, #83BE1E, #6AAB16);
background-image: -ms-linear-gradient(top, #83BE1E, #6AAB16);
background-image: -o-linear-gradient(top, #83BE1E, #6AAB16);
background-image: linear-gradient(top, #83BE1E, #6AAB16);
 
font-weight: bolder; /* полужирное начертание */
text-decoration:none; /* уберём надоедливое подчёркивание, которое ни как не подходит нам */
color: #fff; /* белый цвет текста */
text-align: center; /* выровняем посредине */
text-shadow: 0 1px 0 #5f9d06; /* и добавим не большую тень для текста */

Теперь всё выглядит на много симпатичнее, но для полного счастья было бы не плохо добавить имитацию блика на кнопке, что придаст ещё большее ощущение объёмности.

1
2
3
4
/* опять же для кросбраузерности */
-webkit-box-shadow: inset 0px -2px 3px rgba(255, 255, 255, 0.63);
-o-box-shadow: inset 0px -2px 3px rgba(255, 255, 255, 0.63);
-moz-box-shadow: inset 0px -2px 3px rgba(255, 255, 255, 0.63);

И ещё чуть-чуть чисто от себя - по-моему не очень красиво если выделяется текстна кнопке, решим эту проблему так.

1
2
3
4
5
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none; 
cursor: pointer; /* И сделаем курсор в виде руки */

На этом мы и закончим с оформлением нашей кнопки. Осталось лишь добавить ей жизни, для начала при наведении мыши.

1
2
3
4
5
6
7
8
9
10
11
.button:hover {
color:#fff;
/* сделаем заливку кнопки более светлой чем в спокойном состоянии */
background: rgb(40, 199, 40); /* если браузер не поддерживает градиент будет просто цвет */
 
background-image: -webkit-linear-gradient(top,#91CC2B, #77B823);
background-image: -moz-linear-gradient(top,#91CC2B, #77B823);
background-image: -ms-linear-gradient(top,#91CC2B, #77B823);
background-image: -o-linear-gradient(top,#91CC2B, #77B823);
background-image: linear-gradient(top,#91CC2B, #77B823);
}

А теперь и при нажатии, здесь куда интреснее

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.button:active {
color: rgb(207, 243, 200); /* поменяем цвет текста - более тёмный */
text-shadow: 0 0px 0 #5f9d06;
/* градиен потемнее */
background-image: -webkit-linear-gradient(top,rgb(58, 177, 58), rgb(32, 145, 32));
background-image: -moz-linear-gradient(top,rgb(58, 177, 58), rgb(32, 145, 32));
background-image: -ms-linear-gradient(top,rgb(58, 177, 58), rgb(32, 145, 32));
background-image: -o-linear-gradient(top,rgb(58, 177, 58), rgb(32, 145, 32));
background-image: linear-gradient(top,rgb(58, 177, 58), rgb(32, 145, 32));
/* и чёрную нень вверху кнопки, будто её вдавили */
-webkit-box-shadow: inset 1px 1px 8px rgba(0, 0, 0, 0.42);
-o-box-shadow: inset 1px 1px 8px rgba(0, 0, 0, 0.42);
-moz-box-shadow: inset 1px 1px 8px rgba(0, 0, 0, 0.42);
box-shadow: inset 1px 1px 8px rgba(0, 0, 0, 0.42);
}

 И что бы было видно что наша кнопка нажимается изменим отступ вокруг текста, помним у нас было 4 пикселя, значит нужно сделать сверху на один больше, а снизу меньше, текст сместиться.

Добавляем в описание доя активной кнопки

1
2
padding-top:5px;
padding-bottom:3px;

 Собственно и всё, наша кнопка готова, больше ничего не нужно и весь код описания нашей кнопки может быть выполнен таким образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<html>
   <head>
      <style>
         .dbutton{
            border-bottom: 1px solid #588B1A;
            background: rgb(48, 173, 48);
            display:block;
            cursor: pointer;
 
            width:95px;
            padding:4px;
 
            -webkit-user-select: none;
            -moz-user-select: none;
            -khtml-user-select: none;
            user-select: none;      
 
            font-weight: bolder;
            text-decoration:none;
            color: #fff;
            text-align: center;
            text-shadow: 0 1px 0 #5f9d06;
 
            border-radius: 7px;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
 
            background-image: -webkit-linear-gradient(top, #83BE1E, #6AAB16);
            background-image:    -moz-linear-gradient(top, #83BE1E, #6AAB16);
            background-image:     -ms-linear-gradient(top, #83BE1E, #6AAB16);
            background-image:      -o-linear-gradient(top, #83BE1E, #6AAB16);
            background-image:         linear-gradient(top, #83BE1E, #6AAB16);
 
            -webkit-box-shadow: inset 0px -2px 3px rgba(255, 255, 255, 0.63);
            -o-box-shadow:       inset 0px -2px 3px rgba(255, 255, 255, 0.63);
            -moz-box-shadow:    inset 0px -2px 3px rgba(255, 255, 255, 0.63);
         }
 
         .dbutton:hover {
            color:#fff;
            text-decoration:none;
            background: rgb(40, 199, 40);
 
            background-image: -webkit-linear-gradient(top,#91CC2B, #77B823);
            background-image:    -moz-linear-gradient(top,#91CC2B, #77B823);
            background-image:     -ms-linear-gradient(top,#91CC2B, #77B823);
            background-image:      -o-linear-gradient(top,#91CC2B, #77B823);
            background-image:         linear-gradient(top,#91CC2B, #77B823);
         }
 
         .dbutton:active {
            padding-top:5px;
            padding-bottom:3px;
 
            color: rgb(207, 243, 200);
            text-shadow: 0 0px 0 #5f9d06;
 
            background-image: -webkit-linear-gradient(top,rgb(58, 177, 58), rgb(32, 145, 32));
            background-image:    -moz-linear-gradient(top,rgb(58, 177, 58), rgb(32, 145, 32));
            background-image:     -ms-linear-gradient(top,rgb(58, 177, 58), rgb(32, 145, 32));
            background-image:      -o-linear-gradient(top,rgb(58, 177, 58), rgb(32, 145, 32));
            background-image:         linear-gradient(top,rgb(58, 177, 58), rgb(32, 145, 32));
 
            -webkit-box-shadow: inset 1px 1px 8px rgba(0, 0, 0, 0.42);
            -o-box-shadow:       inset 1px 1px 8px rgba(0, 0, 0, 0.42);
            -moz-box-shadow:    inset 1px 1px 8px rgba(0, 0, 0, 0.42);
            box-shadow:       inset 1px 1px 8px rgba(0, 0, 0, 0.42);
         }
      </style>
   </head>
   <body>
      <a class="button">Подробнее</a>
   </body>
</html>

Естественно что все выше описанные свойства можно менять, можно добавлять свои, а можно и исклучать эти, что бы добиться необходимого внешнего вида кнопки.

Метки: кнопка, css, html

Категория: