本章节我们为大家介绍使用 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 ;} /* Green */ |
.button2 {background-color: #008CBA ;} /* Blue */ |
.button3 {background-color: #f44336 ;} /* Red */ |
.button4 {background-color: #e7e7e7 ; color: black ;} /* Gray */ |
.button5 {background-color: #555555 ;} /* Black */ |
我们可以使用 font-size
属性来设置按钮大小:
我们可以使用 border-radius
属性来设置圆角按钮:
.button1 {border-radius: 2px;} |
.button2 {border-radius: 4px;} |
.button3 {border-radius: 8px;} |
.button4 {border-radius: 12px;} |
.button5 {border-radius: 50%;} |
我们可以使用 border
属性设置按钮边框颜色:
.button1 { |
background-color: white ; |
color: black ; |
border: 2px solid #4CAF50 ; /* Green */ |
} |
... |
我们可以使用 :hover
选择器来修改鼠标悬停在按钮上的样式。
提示: 我们可以使用 transition-duration
属性来设置 "hover" 效果的速度:
.button { |
-webkit-transition-duration: 0.4s; /* Safari */ |
transition-duration: 0.4s; |
} |
.button:hover { |
background-color: #4CAF50 ; /* Green */ |
color: white ; |
} |
... |
我们可以使用 box-shadow
属性来为按钮添加阴影:
.button1 { |
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2) , 0 6px 20px 0 rgba(0,0,0,0.19) ; |
} |
.button2:hover { |
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24) , 0 17px 50px 0 rgba(0,0,0,0.19) ; |
} |
我们可以使用 opacity
属性为按钮添加透明度 (看起来类似
"disabled" 属性效果)。
提示: 我么可以添加 cursor
属性并设置为
"not-allowed" 来设置一个禁用的图片:
默认情况下,按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width
属性来设置按钮的宽度:
提示: 如果要设置固定宽度可以使用像素 (px) 为单位,如果要设置响应式的按钮可以设置为百分比。
鼠标移动到按钮上后添加箭头标记:
点击时添加 "波纹" 效果:
点击时添加 "压下" 效果: