button应该是UI库中最常用到的一种。我个人对google+的那种简单的button风格比较喜欢,因为那样在不同的浏览器下视觉差异不是很大。不过现在自己确实已经没有心思去琢磨怎么去弥补ie的不足,所以下面的东西就不要拿ie打开了。
还是贴出代码吧
<!DOCTYPE html>
<html> <head> <title></title> <style type="text/css"> .mt{margin-top: 20px;} .button{ display: inline-block; *display: inline; zoom: 1; padding: 6px 20px; margin: 0; cursor: pointer; border: 1px solid #bbb; overflow: visible; font: bold 13px arial, helvetica, sans-serif; text-decoration: none; white-space: nowrap; color: #555; background-color: #ddd; background-image: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)); -webkit-transition: background-color .2s ease-out; -moz-transition: background-color .2s ease-out; background-clip: padding-box; /* Fix bleeding */ border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset; text-shadow: 0 1px 0 rgba(255,255,255, .9); } .button:hover{ background-color: #eee; color: #333; } .button:active{ background: #e9e9e9; position: relative; top: 1px; text-shadow: none; box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset; } .button.small{ padding: 4px 12px; } /* Larger buttons styles */ .button.large{ padding: 12px 30px; text-transform: uppercase; } .button.large:active{ top: 2px; } .button.green,.button.red,.button.blue{ color: #FFF; text-shadow: 0 1px 0 rgba(0,0,0,.5); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); } /*********green button***********/ .button.green{ background-color: #57a957; border-color: #57a957; } .button.green:hover{ background-color: #62c462; } .button.green:active{ background: #57a957; } /************red button***********/ .button.red{ background-color: #c43c35; border-color: #c43c35; } .button.red:hover{ background-color: #ee5f5b; } .button.red:active{ background: #c43c35; } /*************blue button***************/ .button.blue{ background-color: #269CE9; border-color: #269CE9; } .button.blue:hover{ background-color: #70B9E8; } .button.blue:active{ background: #269CE9; } /*******disabled button*********/ .button[disabled], .button[disabled]:hover, .button[disabled]:active{ border-color: #eaeaea; background: #fafafa; cursor: default; position: static; color: #999; /* Usually, !important should be avoided but here it's really needed :) */ box-shadow: none !important; text-shadow: none !important; } .green[disabled], .green[disabled]:hover, .green[disabled]:active{ border-color: #57A957; background: #57A957; color: #D2FFD2; } .red[disabled], .red[disabled]:hover, .red[disabled]:active{ border-color: #C43C35; background: #C43C35; color: #FFD3D3; } .blue[disabled], .blue[disabled]:hover, .blue[disabled]:active{ border-color: #269CE9; background: #269CE9; color: #93D5FF; } /*********group button**********/ .button-group,.button-group li{ display: inline-block; *display: inline; zoom: 1; } .button-group{ font-size: 0; /* Inline block elements gap - fix */ margin: 0; padding: 0; background:#f1f1f1; border-bottom: 1px solid rgba(0, 0, 0, .07); padding: 7px; border-radius: 7px; } .button-group li{ margin-right: -1px; /* Overlap each right button border */ } .button-group .button{ font-size: 13px; /* Set the font size, different from inherited 0 */ border-radius: 0; } .button-group .button:active{ box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset; } .button-group li:first-child .button{ border-radius: 3px 0 0 3px; } .button-group li:first-child .button:active{ box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset; } .button-group li:last-child .button{ border-radius: 0 3px 3px 0; } .button-group li:last-child .button:active{ box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset; } </style> </head> <body> <button class="small button">Button</button> <button class="button">Button</button> <button class="large button">Button</button> <div class="mt"> <button class="button">Button</button> <button class="button green">Button</button> <button class="button red">Button</button> <button class="button blue">Button</button> </div> <div class="mt"> <button class="button" disabled="disabled">Button</button> <button class="button green" disabled="disabled">Button</button> <button class="button red" disabled="disabled">Button</button> <button class="button blue" disabled="disabled">Button</button> </div> <div class="mt"> <ul class="button-group"> <li><button class="button">Button1</button></li> <li><button class="button">Button2</button></li> <li><button class="button">Button3</button></li> <li><button class="button">Button4</button></li> </ul> </div> <div class="mt"> <ul class="button-group"> <li><button class="button">Button1</button></li> <li><button class="button green">Button2</button></li> <li><button class="button red">Button3</button></li> <li><button class="button blue">Button4</button></li> </ul> </div> </body> </html>
按字母顺序浏览:A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
→我们致力于为广大网民解决所遇到的各种电脑技术问题 如果您认为本词条还有待完善,请 编辑词条
上一篇CSS让网页图片自适应大小
下一篇清除浮动和图片水平垂直居中