Лого www.SiteHere.ru

Быстрая установка кнопок CSS

В связи с новыми изменениями в области дизайна многие не очень хотят менять дизайн своих сайтов, потому что менять нужно очень много. Но сегодня Вы увидите кнопки CSS, которые подойдут и для тех, у кого дизайн сайта еще не в стиле минимализма. Кнопки выглядят объемно, так как при нажатии одна часть кнопки CSS опускается, а другая остается неизменной.

Кнопки CSS можно посмотреть в «живом» виде по ссылкам:

Смотреть примерСкачать

Что еще из CSS кнопок есть на сайте:

PDF отчет

Ниже Вы можете просто копировать HTML и соответствующий, понравившейся кнопке, CSS стиль, а затем вставлять на свой сайт.

1-й вариант кнопки

Самый простой вариант кнопки. Внешне кнопка выглядит вот так:

Демо - Вариант кнопки 1

HTML разметка

Используем обычную ссылку с классом a_demo_one:

1
2
3
<a href="#" class="a_demo_one">
    Нажми на меня!
</a>

CSS оформление

Код стилей будет большим, потому что идет со всеми префиксами. Кроме основного состояния, есть еще два: before и active. А вот, собственно, сами стили:

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
.a_demo_one {
    background-color:#3bb3e0;
    padding:10px;
    position:relative;
    font-family: sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    border: solid 1px #186f8f;
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgb(44,160,202)),
            color-stop(1, rgb(62,184,229))
        );
    -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
    -moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
    box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
 
.a_demo_one::before {
    background-color:#ccd0d5;
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    padding:8px;
    left:-8px;
    top:-8px;
    z-index:-1;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
    -moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
    -o-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
    box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}
 
.a_demo_one:active {
    padding-bottom:9px;
    padding-left:10px;
    padding-right:10px;
    padding-top:11px;
    top:1px;
    background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgb(62,184,229)),
            color-stop(1, rgb(44,160,202))
        );
}

2-й вариант кнопки

Здесь уже наблюдается объем и при клике кнопка опускается:

Демо - Вариант кнопки 2

HTML разметка

Класс ссылки меняется на a_demo_two, то есть только последняя часть названия класса:

1
2
3
<a href="#" class="a_demo_two">
    Второй вариант кнопки!
</a>

CSS оформление

Стилей для этой кнопки также не меньше, чем для прошлой, но эти стили полностью готовы и Вы можете их копировать и затем вставлять на сайт:

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
.a_demo_two {
    background-color:#3bb3e0;
    padding:10px;
    position:relative;
    font-family: sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(44,160,202)),
        color-stop(1, rgb(62,184,229))
    );
    -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
    -moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
    -o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
    box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
 
.a_demo_two::before {
    background-color:#072239;
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    padding-left:2px;
    padding-right:2px;
    padding-bottom:4px;
    left:-2px;
    top:5px;
    z-index:-1;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 1px 0px #fff;
    -moz-box-shadow: 0px 1px 0px #fff;
    -o-box-shadow: 0px 1px 0px #fff;
    box-shadow: 0px 1px 0px #fff;
}
 
.a_demo_two:active {
    color:#156785;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
    background:rgb(44,160,202);
    -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
    -moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
    -o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
    box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
    top:7px;
}
 
.a_demo_two:active::before {
    top:-2px;
}

3-й вариант кнопки

Далее идет более интересный вариант кнопки css:

Демо - Вариант кнопки 3

HTML разметка

В этом случае ссылка имеет класс a_demo_three:

1
2
3
<a href="#" class="a_demo_three">
    Нажми!
</a>

CSS оформление

В 3-м варианте стилей еще больше, потому что еще необходимо разместить нумерацию кнопок слева с помощью свойства content:

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
.a_demo_three {
    background-color:#3bb3e0;
    font-family: sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    position:relative;
    padding:10px 20px;
    border-left:solid 1px #2ab7ec;
    margin-left:35px;
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(44,160,202)),
        color-stop(1, rgb(62,184,229))
    );
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}
 
.a_demo_three:active {
    top:3px;
    background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(62,184,229)),
        color-stop(1, rgb(44,160,202))
    );
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}
 
.a_demo_three::before {
    background-color:#2561b4;
    content:"1";
    width:35px;
    max-height:29px;
    height:100%;
    position:absolute;
    display:block;
    padding-top:5px;
    top:0px;
    left:-36px;
    font-size:18px;
    font-weight:bold;
    color:#8fd1ea;
    text-shadow:1px 1px 0px #07526e;
    border-right:solid 1px #07526e;
    background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
    background-image: -o-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(10,94,125)),
        color-stop(1, rgb(14,139,184))
    );
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
    -moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
    -o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
    box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
}
 
.a_demo_three:active::before {
    top:-3px;
    -webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
    -moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
    -o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
    box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
}
 
/*
Вторая кнопка
*/
 
.second_button::before {
    content:"2";
}
 
/*
Третья кнопка
*/
 
.third_button::before {
    content:"3";
}

4-й вариант кнопки

Еще один необычный стиль кнопки вы видите ниже. Одна часть кнопки опускается вниз, а кружок с цифрой остается и как будто делает «отверстие» у кнопки (активное состояние я указал стрелкой):

Демо - Вариант кнопки 4

HTML разметка

Изменяем класс на a_demo_four:

1
2
3
<a href="#" class="a_demo_four">
    Четвертый вариант!
</a>

CSS оформление

В этом варианте кнопки css хочу лишь заметить что есть одна картинка с изображением стрелочки, к которой не забудьте указать путь:

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
75
76
77
78
79
80
81
.a_demo_four {
    background-color:#3bb3e0;
    font-family: sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    position:relative;
    padding:10px 20px;
    padding-right:50px;
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(44,160,202)),
        color-stop(1, rgb(62,184,229))
    );
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}
 
.a_demo_four:active {
    top:3px;
    background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(62,184,229)),
        color-stop(1, rgb(44,160,202))
    );
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}
 
.a_demo_four::before {
    background-color:#2591b4;
    background-image:url(../images/right_arrow.png);
    background-repeat:no-repeat;
    background-position:center center;
    content:"";
    width:20px;
    height:20px;
    position:absolute;
    right:15px;
    top:50%;
    margin-top:-9px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
    -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
    -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
    box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
}
 
.a_demo_four:active::before {
    top:50%;
    margin-top:-12px;
    -webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
    -moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
    -o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
    box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
}

5-й вариант кнопки

Последний вариант — это способ показать что ссылки можно «опускать» относительно любого блока:

Демо - Вариант кнопки 5

HTML разметка

Изменяем класс на a_demo_five:

1
2
3
<a href="#" class="a_demo_five">
    Пятый вариант!
</a>

CSS оформление

Стили практически не отличаются от тех, что выше, только своими значениями:

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
75
76
77
78
79
80
81
82
.a_demo_five {
    background-color:#3bb3e0;
    width:150px;
    display:inline-block;
    font-family: sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    position:relative;
    margin-top:40px;
    padding-bottom:10px;
    padding-top:10px;
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(44,160,202)),
        color-stop(1, rgb(62,184,229))
    );
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}
 
.a_demo_five:active {
    top:0px;
    background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(62,184,229)),
        color-stop(1, rgb(44,160,202))
    );
    -webkit-box-shadow: inset 0px 4px 1px #0b698b, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    -moz-box-shadow: 0px 2px 0px 1px #156785, 0px 5px 3px #999;
    -o-box-shadow: 0px 2px 0px 1px #156785, 0px 5px 3px #999;
    box-shadow: inset 0px 4px 1px #0b698b, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}
.a_demo_five::before {
    background-color:#fff;
    background-image:url(../images/heart.gif);
    background-repeat:no-repeat;
    background-position:center center;
    content:"";
    width:150px;
    height:40px;
    position:absolute;
    top:-30px;
    left:0px;
    margin-top:-11px;
    z-index:-1;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.a_demo_five:active::before {
    top: -30px;	
    -webkit-box-shadow: 0px 3px 0px #ccc;
    -moz-box-shadow: 0px 3px 0px #ccc;
    -o-box-shadow: 0px 3px 0px #ccc;
    box-shadow: 0px 3px 0px #ccc;
}

Короткое видео по установке кнопок

Если возникли проблемы с установкой кнопок на свой сайт — я записал небольшое видео где показал как установить сайт под CMS WordPress:

Вывод

Менять дизайн сайта сразу и целиком — требует сил и времени. Но если делать это постепенно, а начать, например, с кнопок. Эти кнопки CSS хоть не в стиле выполнены не в стиле минимализма, но смотрятся красиво. Поэтому, если у Вас не так много времени, чтобы совершенствовать дизайн своего сайта — начните хотя бы с кнопок :) .

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Быстрая установка кнопок CSS 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

Бесплатный PDF отчет
Комментарии (6) к записи
  • Никита Волков

    Здравствуйте, извините, а где взять рисунок стрелочки, к которой надо указать путь в варианте кнопки №4?

     
    • Юрий

      Здравствуйте, Никита. Он находится в архиве с исходниками (в папке images), который можно скачать в начале статьи.

       
      • Никита Волков

        Уже скачал, но у меня так и не получилось поставить кнопки((
        Скопирвоал всё в style.css, поставил html код в статью, указал путь к картинке (стрелочке), но всё отображается просто как обычная ссылка. Никак не смог понять в чём дело.

         
        • Юрий

          Тогда нужно узнать есть ли у этих кнопок стили, которые в style.css.
          Для этого нужно кликнуть по кнопке правой кнопкой мыши и выбрать «Исследовать элемент» (если используете браузер Mozilla Firefox) или «Просмотр кода элемента» (если пользуетесь Google Chrome). Внизу окна появится панель, где слева будет HTML код страницы, а справа CSS. Так вот в CSS части справа необходимо найти стили, которые Вы написали в style.css.

          Если их нет, тогда проверить в том ли файле стилей Вы их написали. Возможно в Вашей теме используется другой файл стилей, например theme.css или еще какой-нибудь.

          Если они идут где-то ниже и зачеркнуты, тогда после каждого свойства, перед символом «точка с запятой» поставьте слово "!important" без кавычек :smile: .

           
          • Никита Волков

            Спасибо большое! Буду разбираться тогда!

             
  • Виктор

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

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *