工作上寫(xiě)了一個(gè)btn的樣式類(lèi)侣肄。很小的一塊了。在bootstrap強(qiáng)大的樣式庫(kù)里就是非常渺小的一個(gè)迄靠。

類(lèi)名 <code>.btn</code>

<button class="btn"></button>

表現(xiàn)類(lèi)<code>.btn-default/.btn-primary/.btn-danger/.btn-warning/.btn-info/.btn-success</code>

btn的默認(rèn)表現(xiàn)為btn-default。

可應(yīng)用元素

你可以應(yīng)用在 input[type=submit/button/reset]、a晚碾、span等元素上。

處理方法

input[type="button"]和input[type="submit"]在瀏覽器中的box-sizing表現(xiàn)是不一樣的喂急。前者表現(xiàn)為content-box格嘁，后者則為border-box，這個(gè)ie廊移，火狐都驚人的一直糕簿，連ie7也是如此。所以將box-sizing設(shè)置為content-box狡孔，讓其行為一致懂诗，ie7則采用手動(dòng)添加border高度的方式降級(jí)處理。

input[type=submit] ie7黑色邊框bug

<label class="btn btn-success"><input type="submit" value=" 提交"></label>

采用label包裹的方式處理苗膝，內(nèi)部input背景透明殃恒，border：0的方式消除。

當(dāng)然辱揭，如果你不用處理ie7上的這個(gè)小bug离唐，完全不用理會(huì)。直接btn類(lèi)設(shè)置就好了问窃。

![W)P7]LTQPYYHIF`0AYZ0}ZB.png](http://upload-images.jianshu.io/upload_images/330266-87eb9e6ee98e2a2f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

查看DEMO

@charset "utf-8";
$height:100;
.btn{
    height:$height + px;
    line-height:$height + px;
    padding: 0 0.3em;
    font-size: 14px;
    box-sizing:content-box;//重置input submit亥鬓、buttonbox-sizing border-box 為content-box。做到一致的表現(xiàn) //ie7手動(dòng)添加border高度
    vertical-align: text-top;
    
    display: inline-block;
    *display: inline;
    *zoom:1;
    border:1px solid #ddd;
    background-color: #ddd;
    border-radius: 3px;
    overflow: visible;//IE7下文字表現(xiàn)左右空格
    color: #333;
    cursor: pointer;
    input[type="submit"]{//IE7下黑色邊框問(wèn)題泡躯，采用label包裹input[type="submit"]方式
        background:transparent;
        border:none;
        line-height:$height + px;
        height:$height + px;
        display: block;
        vertical-align: text-top;
        font-size:14px;
        margin:0 -6px;
        *overflow: visible;
        *margin:0;
        color: #fff
    }
    
    &:hover{
        opacity: 0.8;
        filter:alpha(opacity=80); 
    }
    &:active{
        opacity:1;
        filter:alpha(opacity=100); 
    }
    &:focus{
        outline: 0;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }
    &:visited{
        opacity:1;
        filter:alpha(opacity=100); 
    }
    
    @at-root{
        /* 處理火狐-moz-focus-inner內(nèi)默認(rèn)padding值贮竟，導(dǎo)致line-height文字不居中問(wèn)題*/
        button::-moz-focus-inner,
        input[type="button"]::-moz-focus-inner,
        input[type="submit"]::-moz-focus-inner,
        input[type="reset"]::-moz-focus-inner { 
            border:none; 
            padding:0 inherit; 
        }
        input[type="submit"].btn,
        input[type="button"].btn,
        input[type="reset"].btn,
        button.btn{
            *height:($height + 2) + px;//處理IE7 box-sizing問(wèn)題丽焊。submit,button,reset表現(xiàn)為border-box問(wèn)題
            *line-height:($height - 2) + px;
        }
        a.btn{
            color:inherit;
            text-decoration:none;
        }
    }
}

.btn-default{
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-danger{
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
.btn-warning{
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}
.btn-info{
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;        
}
.btn-success{
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;    
}
.btn-primary{
    color: #fff;
    background-color: #428bca;
    border-color: #357ebd;
}