按钮样式

基础样式

 .btn{
            display:inline-block;
            border: 1px solid transparent;
            padding:6px 12px;
            border-radius: 4px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
           vertical-align: middle
      outline: 0;
}

背景样式扩展:

 .btn.btn-primary{
            background-color:cornflowerblue;
            color:#fff;
            border-color:blue;
        }
        .btn.btn-primary:hover{
            background-color: blue;
        }
<a class="btn btn-primary btn-lg">按钮样式</a>

 

改变按钮大小:

 .btn.btn-lg{
            padding: 10px 16px;
            font-size: 18px;
            line-height: 1.3333333;
            border-radius: 6px;
        }

引用:

<a class="btn btn-primary btn-lg">按钮样式</a>
<input class="btn btn-primary btn-lg" value="按钮样式">
<button class="btn btn-primary btn-lg">按钮样式</button>

 

posted @ 2019-01-03 21:09  千寻的天空之城  阅读(616)  评论(0编辑  收藏  举报