CSS 按钮
本章节我们为大家介绍使用 CSS 来制作按钮。
基本按钮样式
实例
.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
;
}
尝试一下 »
按钮大小
我们可以使用
font-size
属性来设置按钮大小:
实例
.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
;
}
尝试一下 »
圆角按钮
我们可以使用
border-radius
属性来设置圆角按钮:
实例
.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
;
}
...
尝试一下 »
鼠标悬停按钮
我们可以使用
:hover
选择器来修改鼠标悬停在按钮上的样式。
提示:
我们可以使用
transition-duration
属性来设置 "hover" 效果的速度:
实例
.button
{
-
webkit-transition-duration:
0.4
s
;
transition-duration:
0.4
s
;
}
.button
:hover
{
background-color:
#4CAF50
;
color:
white
;
}
...
尝试一下 »
按钮阴影
我们可以使用
box-shadow
属性来为按钮添加阴影:
实例
.button1
{
box-shadow:
8
px
16
px
rgba
(
,
,
,
0.2
),
6
px
20
px
rgba
(
,
,
,
0.19
)
;
}
.button2
:hover
{
box-shadow:
12
px
16
px
rgba
(
,
,
,
0.24
),
17
px
50
px
rgba
(
,
,
,
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
%
;
}
尝试一下 »
按钮组
移除外边距并添加
float:left
来设置按钮组:
实例
.button
{
float:
left
;
}
尝试一下 »
带边框按钮组
我们可以使用
border
属性来设置带边框的按钮组:
实例
.button
{
float:
left
;
border:
1
px
solid
green
}
尝试一下 »
实例
.btn-group
button
{
background-color:
#04AA6D
;
border:
1
px
solid
green
;
color:
white
;
padding:
10
px
24
px
;
cursor:
pointer
;
float:
left
;
}
尝试一下 »
按钮动画
实例
鼠标移动到按钮上后添加箭头标记:
尝试一下 »
实例
点击时添加 "波纹" 效果:
尝试一下 »
实例
点击时添加 "压下" 效果:
尝试一下 »
更多按钮样式可以使用 CSS 按钮生成器：https://c.yssmx.com/front-end/6222/
