CSS实例教程:简单的button风格的UI按钮

2012-10-22 00:32:01  来源:网页教学网 

网页制作Webjx文章简介:CSS实例教程:简单的button风格的UI按钮。

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>

更多