btn样式类

工作上写了一个btn的样式类。很小的一块了。在bootstrap强大的样式库里就是非常渺小的一个。

类名 <code>.btn</code>

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

表现类<code>.btn-default/.btn-primary/.btn-danger/.btn-warning/.btn-info/.btn-success</code>

btn的默认表现为btn-default。

可应用元素

你可以应用在 input[type=submit/button/reset]、a、span等元素上。

处理方法

input[type="button"]和input[type="submit"]在浏览器中的box-sizing表现是不一样的。前者表现为content-box，后者则为border-box，这个ie，火狐都惊人的一直，连ie7也是如此。所以将box-sizing设置为content-box，让其行为一致，ie7则采用手动添加border高度的方式降级处理。

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

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

采用label包裹的方式处理，内部input背景透明，border：0的方式消除。

当然，如果你不用处理ie7上的这个小bug，完全不用理会。直接btn类设置就好了。

![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。做到一致的表现 //ie7手动添加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下文字表现左右空格
    color: #333;
    cursor: pointer;
    input[type="submit"]{//IE7下黑色边框问题，采用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内默认padding值，导致line-height文字不居中问题*/
        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问题。submit,button,reset表现为border-box问题
            *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;
}