上次介绍的荧光按钮其实是其于这一次的代码基础上加上了背景特效而已。那么一个漂亮的CSS3按钮应该如何实现呢？
其实很简单。首先确定按钮风格。CSS3的色彩模式为RGBA，RGB大家都很熟悉，A呢其实就是透明度。看代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .button, .button:visited { background: #222 url(overlay.png) repeat-x; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer } |
然后确定按钮的大小。分成small, medium 和 large。
16 17 18 19 20 21 22 23 24 25 26 27 28 | .small.button, .small.button:visited { font-size: 11px} .button, .button:visited, .medium.button, .medium.button:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } .large.button, .large.button:visited { font-size: 14px; padding: 8px 14px 9px; } .super.button, .super.button:visited { font-size: 34px; padding: 8px 14px 9px; } |
最后我们来确定按钮的颜色。
20 21 22 23 24 25 26 27 28 29 30 31 | .pink.button, .magenta.button:visited { background-color: #e22092; } .pink.button:hover { background-color: #c81e82; } .green.button, .green.button:visited { background-color: #91bd09; } .green.button:hover { background-color: #749a02; } .red.button, .red.button:visited { background-color: #e62727; } .red.button:hover { background-color: #cf2525; } .orange.button, .orange.button:visited { background-color: #ff5c00; } .orange.button:hover { background-color: #d45500; } .blue.button, .blue.button:visited { background-color: #2981e4; } .blue.button:hover { background-color: #2575cf; } .yellow.button, .yellow.button:visited { background-color: #ffb515; } .yellow.button:hover { background-color: #fc9200; } |
下面是一个例子：
