CSS按钮
同样的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;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
示例：
<button>默认按钮</button><a href="#" class="button">链接按钮</a><button class="button">按钮</button><input type="button" class="button" value="输入按钮">- 1
- 2
- 3
- 4
按钮
按钮颜色
利用background-color软件开发定制属性可以为按钮改变颜软件开发定制色搭配合适的字体颜色软件开发定制会有更好的效果：
.button1 {background-color: #4CAF50;} /* 绿色 */.button2 {background-color: #008CBA;} /* 蓝色 */.button3 {background-color: #f44336;} /* 红色 */ .button4 {background-color: #e7e7e7; color: black;} /* 灰色 */ .button5 {background-color: #555555;} /* 黑色 */.button6 {background-color:black;color:cyan;}/*黑色*/- 1
- 2
- 3
- 4
- 5
- 6
绿色蓝色红色灰色黑色黑色
按钮尺寸
通过使用属性padding和属性font-size改变字体和字体大小来改变按钮的大小。
首先看字体大小的影响：
12px24px2em
再来试试内边距的影响：
12px24px2em
12px 24px24px 2em2em 12px
把字体和内边距合起来：
12px字体 12px内边距24px 24px2em 2em
圆角按钮
使用border-radius属性可以为按钮设置圆角；
button{ border: 2px inset cyan; border-radius:12px;/*50%;*/ background-color:balck; color:cyan; padding:12px;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
12px
50%
多色边框
红色黄色蓝色绿色
多样按钮
button{ background-color: black; color:cyan; border-width:5px; border-style:inset outset solid groove; border-color:red yellow blue green; border-radius:12px; padding:12px;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
悬停边框
button { transition: 0.4s;}button:hover { background-color: #4CAF50; /* Green */ color: white;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
效果显示如下：
阴影按钮
通过属性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);}- 1
- 2
- 3
- 4
- 5
- 6
- 7
效果如下：
禁用按钮
使用属性opacity为按钮创建禁用的外观，使用cursor为按钮创建禁用的光标形式。
button{ background-color: black; color:cyan; border-width:5px; border-style:inset outset solid groove; border-color:red yellow blue green; border-radius:12px; padding:12px;}.button1{ cursor:pointer;}.button2{ cursor:not-allowed; opacity:0.6;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
普通按钮
禁用的按钮
按钮宽度
默认情况下，按钮的宽度取决于文本的长短，但是可以使用属性width为其更改；
正常
250px
40%
100%
为按钮设置边框分组
button1button2button3…
以上是没有边框的按钮
button1button2button3…
这是只为右边设置边框的按钮
还可以设置float:left;属性和display:block;属性创建垂直的按钮栏；
同时可以结合悬停样式创建更好的效果。
图像上的按钮
像是前面一个小节记录的，可以使用相同的方法创建位于图像上相应位置的按钮。与此同时需要注意，在div容器内需要设置position:relative;的属性，在按钮设置position:absolute;的属性，这样就可以避免后者设置位置时是根据整个html界面而非是div容器设置的。
动画按钮
可以根据伪类元素:after :hover 创建动画按钮；
可以参考这几个链接：