前面向大家介绍了一款超级友爱的CSS3按钮和一款光彩四射的CSS3按钮，今天继续给大家带来一款非常漂亮的CSS3按钮叫Dark Navigation Buttons，不仅是按钮，同时你也可以用它来作导航，同样非常出色。先看看这款CSS3按钮的效果图吧：
其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
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
118
|
/* Dark Button CSS */
.button {
outline
:
0
;
padding
:
5px
12px
;
display
:
block
;
color
:
#9fa8b0
;
font-weight
:
bold
;
text-shadow
:
1px
1px
#1f272b
;
border
:
1px
solid
#1c252b
;
border-radius:
3px
;
-moz-border-radius:
3px
;
-webkit-border-radius:
3px
;
background
:
#232B30
;
/* old browsers */
background
: -moz-linear-gradient(
top
,
#3D4850
3%
,
#313d45
4%
,
#232B30
100%
);
/* firefox */
background
: -webkit-gradient(linear,
left
top
,
left
bottom
, color-stop(
3%
,
#3D4850
), color-stop(
4%
,
#313d45
), color-stop(
100%
,
#232B30
));
/* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=
'#3D4850'
, endColorstr=
'#232B30'
,GradientType=
0
);
/* ie */
box-shadow:
1px
1px
1px
rgba(
0
,
0
,
0
,
0.2
);
/* CSS3 */
-moz-box-shadow:
1px
1px
1px
rgba(
0
,
0
,
0
,
0.2
);
/* Firefox */
-webkit-box-shadow:
1px
1px
1px
rgba(
0
,
0
,
0
,
0.2
);
/* Safari, Chrome */
}
.button:hover {
color
:
#fff
;
background
:
#4C5A64
;
/* old browsers */
background
: -moz-linear-gradient(
top
,
#4C5A64
3%
,
#404F5A
4%
,
#2E3940
100%
);
/* firefox */
background
: -webkit-gradient(linear,
left
top
,
left
bottom
, color-stop(
3%
,
#4C5A64
), color-stop(
4%
,
#404F5A
), color-stop(
100%
,
#2E3940
));
/* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=
'#4C5A64'
, endColorstr=
'#2E3940'
,GradientType=
0
);
/* ie */
}
.button:active {
background-position
:
0
top
;
position
:
relative
;
top
:
1px
;
color
:
#fff
;
padding
:
6px
12px
4px
;
background
:
#20282D
;
/* old browsers */
background
: -moz-linear-gradient(
top
,
#20282D
3%
,
#252E34
51%
,
#222A30
100%
);
/* firefox */
background
: -webkit-gradient(linear,
left
top
,
left
bottom
, color-stop(
3%
,
#20282D
), color-stop(
51%
,
#252E34
), color-stop(
100%
,
#222A30
));
/* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=
'#20282D'
, endColorstr=
'#222A30'
,GradientType=
0
);
/* ie */
-moz-box-shadow:
1px
1px
1px
rgba(
255
,
255
,
255
,
0.1
);
/* Firefox */
-webkit-box-shadow:
1px
1px
1px
rgba(
255
,
255
,
255
,
0.1
);
/* Safari, Chrome */
box-shadow:
1px
1px
1px
rgba(
255
,
255
,
255
,
0.1
);
/* CSS3 */
}
/* Search CSS: */
.search-input {
padding
:
0
5px
0
22px
;
border
:
1px
solid
#1c252b
;
height
:
30px
;
color
:
#9fa8b0
;
font-size
:
12px
;
line-height
:
30px
;
font-weight
:
bold
;
text-shadow
:
1px
1px
#1f272b
;
border-radius:
25px
;
-moz-border-radius:
25px
;
-webkit-border-radius:
25px
;
background
:
#20282D
;
/* old browsers */
background
: -moz-linear-gradient(
top
,
#20282D
3%
,
#252E34
51%
,
#222A30
100%
);
/* firefox */
background
: -webkit-gradient(linear,
left
top
,
left
bottom
, color-stop(
3%
,
#20282D
), color-stop(
51%
,
#252E34
), color-stop(
100%
,
#222A30
));
/* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=
'#20282D'
, endColorstr=
'#222A30'
,GradientType=
0
);
/* ie */
-moz-box-shadow:
1px
1px
1px
rgba(
255
,
255
,
255
,
0.1
);
/* Firefox */
-webkit-box-shadow:
1px
1px
1px
rgba(
255
,
255
,
255
,
0.1
);
/* Safari, Chrome */
box-shadow:
1px
1px
1px
rgba(
255
,
255
,
255
,
0.1
);
/* CSS3 */
}
.search-input:focus {
outline
:
none
;}
.search-submit {
width
:
13px
;
height
:
13px
;
border
:
none
;
background
:
url
(mag-glass.png)
no-repeat
;
display
:
block
;
position
:
absolute
;
left
:
26px
;
top
:
10px
;
text-indent
:
-9999em
;
}
/* Vertical List: */
.vertical-list {
list-style
:
none
;
padding
:
10px
;
width
:
200px
;
border-radius:
5px
;
-moz-border-radius:
5px
;
-webkit-border-radius:
5px
;
background
:
#20282D
;
/* old browsers */
background
: -moz-linear-gradient(
top
,
#20282D
3%
,
#252E34
51%
,
#222A30
100%
);
/* firefox */
background
: -webkit-gradient(linear,
left
top
,
left
bottom
, color-stop(
3%
,
#20282D
), color-stop(
51%
,
#252E34
), color-stop(
100%
,
#222A30
));
/* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=
'#20282D'
, endColorstr=
'#222A30'
,GradientType=
0
);
/* ie */
-moz-box-shadow:
1px
1px
1px
rgba(
255
,
255
,
255
,
0.1
);
/* Firefox */
-webkit-box-shadow:
1px
1px
1px
rgba(
255
,
255
,
255
,
0.1
);
/* Safari, Chrome */
box-shadow:
1px
1px
1px
rgba(
255
,
255
,
255
,
0.1
);
/* CSS3 */
}
.vertical-list .button {
border-radius:
5px
;
-moz-border-radius:
5px
;
-webkit-border-radius:
5px
;
background
:
#515B62
;
/* old browsers */
background
: -moz-linear-gradient(
top
,
#515B62
3%
,
#444E55
5%
,
#394147
100%
);
/* firefox */
background
: -webkit-gradient(linear,
left
top
,
left
bottom
, color-stop(
3%
,
#515B62
), color-stop(
5%
,
#444E55
), color-stop(
100%
,
#394147
));
/* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=
'#515B62'
, endColorstr=
'#394147'
,GradientType=
0
);
/* ie */
}
.vertical-list .button:hover {
background
:
#5F6B72
;
/* old browsers */
background
: -moz-linear-gradient(
top
,
#5F6B72
3%
,
#56646C
4%
,
#4D5A62
50%
,
#434D54
100%
);
/* firefox */
background
: -webkit-gradient(linear,
left
top
,
left
bottom
, color-stop(
3%
,
#5F6B72
), color-stop(
4%
,
#56646C
), color-stop(
50%
,
#4D5A62
), color-stop(
100%
,
#434D54
));
/* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=
'#5F6B72'
, endColorstr=
'#434D54'
,GradientType=
0
);
/* ie */
}
.vertical-list .button:active {
padding
:
5px
12px
;
top
:
0
;
background
:
#515B62
;
/* old browsers */
background
: -moz-linear-gradient(
top
,
#515B62
3%
,
#444E55
5%
,
#394147
100%
);
/* firefox */
background
: -webkit-gradient(linear,
left
top
,
left
bottom
, color-stop(
3%
,
#515B62
), color-stop(
5%
,
#444E55
), color-stop(
100%
,
#394147
));
/* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=
'#515B62'
, endColorstr=
'#394147'
,GradientType=
0
);
/* ie */
-moz-box-shadow:
1px
1px
1px
rgba(
255
,
255
,
255
,
0.1
);
/* Firefox */
-moz-box-shadow:
1px
1px
1px
rgba(
0
,
0
,
0
,
0.2
);
/* Firefox */
-webkit-box-shadow:
1px
1px
1px
rgba(
0
,
0
,
0
,
0.2
);
/* Safari, Chrome */
box-shadow:
1px
1px
1px
rgba(
0
,
0
,
0
,
0.2
);
/* CSS3 */
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<
ul
class
=
"button-list"
>
<
li
><
a
href
=
'/'
class
=
'button'
>Home</
a
></
li
>
<
li
><
a
href
=
'/'
class
=
'button'
>About</
a
></
li
>
<
li
><
a
href
=
'/'
class
=
'button'
>Portfolio</
a
></
li
>
<
li
><
a
href
=
'/'
class
=
'button'
>Blog</
a
></
li
>
<
li
class
=
"search"
><
input
type
=
"text"
class
=
"search-input"
name
=
"search"
value
=
"Search"
onclick
=
"$(this).val('');"
/><
input
type
=
"submit"
class
=
"search-submit"
/></
li
>
</
ul
>
<
h3
>Vertical Menu:</
h3
>
<
ul
class
=
"vertical-list"
>
<
li
><
a
href
=
'/'
class
=
'button'
>Home</
a
></
li
>
<
li
><
a
href
=
'/'
class
=
'button'
>Our Studio</
a
></
li
>
<
li
><
a
href
=
'/'
class
=
'button'
>Portfolio</
a
></
li
>
<
li
><
a
href
=
'/'
class
=
'button'
>Our Team</
a
></
li
>
<
li
><
a
href
=
'/'
class
=
'button'
>Get in Touch</
a
></
li
>
</
ul
>
|
扫一扫
1743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
