.button
{
background-color:
#4CAF50;
/* Green */
border:
none;
color:
white;
padding:
15px 32px;
text-align:
center;
text-decoration:
none;
display:
inline-block;
font-size:
16px;
尝试一下 »
我们可以使用
background-color
属性来设置按钮颜色:
.button1
{
background-color:
#4CAF50
;
}
.button2
{
background-color:
#008CBA
;
}
.button3
{
background-color:
#f44336
;
}
.button4
{
background-color:
#e7e7e7
;
color:
black
;
}
.button5
{
background-color:
#555555
;
}
尝试一下 »
.button1
{
font-size:
10
px
;
}
.button2
{
font-size:
12
px
;
}
.button3
{
font-size:
16
px
;
}
.button4
{
font-size:
20
px
;
}
.button5
{
font-size:
24
px
;
}
尝试一下 »
.button1
{
border-radius:
2
px
;
}
.button2
{
border-radius:
4
px
;
}
.button3
{
border-radius:
8
px
;
}
.button4
{
border-radius:
12
px
;
}
.button5
{
border-radius:
50
%
;
}
尝试一下 »
按钮边框颜色
我们可以使用
border
属性设置按钮边框颜色:
.button1
{
background-color:
white
;
color:
black
;
border:
2
px
solid
#4CAF50
;
尝试一下 »
.button
{
-
webkit-transition-duration:
0.4
s
;
transition-duration:
0.4
s
;
.button
:hover
{
background-color:
#4CAF50
;
color:
white
;
尝试一下 »
我们可以使用
box-shadow
属性来为按钮添加阴影:
.button1
{
box-shadow:
0
8
px
16
px
0
rgba
(
0
,
0
,
0
,
0.2
),
0
6
px
20
px
0
rgba
(
0
,
0
,
0
,
0.19
)
;
.button2
:hover
{
box-shadow:
0
12
px
16
px
0
rgba
(
0
,
0
,
0
,
0.24
),
0
17
px
50
px
0
rgba
(
0
,
0
,
0
,
0.19
)
;
尝试一下 »
我们可以使用
opacity
属性为按钮添加透明度 (看起来类似
"disabled" 属性效果)。
提示:
我们可以添加
cursor
属性并设置为
"not-allowed" 来设置一个禁用的图片:
.disabled
{
opacity:
0.6
;
cursor:
not-allowed
;
尝试一下 »
默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用
width
属性来设置按钮的宽度:
提示:
如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。
.button1
{
width:
250
px
;
}
.button2
{
width:
50
%
;
}
.button3
{
width:
100
%
;
}
尝试一下 »
.btn-group
button
{
background-color:
#04AA6D
;
border:
1
px
solid
green
;
color:
white
;
padding:
10
px
24
px
;
cursor:
pointer
;
float:
left
;
尝试一下 »
