码迷,mamicode.com
首页 > 其他好文 > 详细

东拼西凑完成一个“前端框架”(6) - 按钮

时间:2020-01-09 00:43:00      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:inf   frontend   primary   子类   vertica   success   16px   tran   strong   

目录

写在前面

完成了整体框架的工作,下面开始写一些组件;从按钮开始,设计的思路主要参照 Bootstrap

基类

首先定义按钮的基类 btn

CSS

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: #fbfbfb;
    border: 1px solid #ddd;
    padding: 5px 10px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 4px;
}

定义了常规状态后,我们还需要定义按钮的 hoverdisabledactivefocus的状态:

.btn:focus {
    outline: 0;
}

.btn:hover {
    background-color: #f6f6f6;
}

.btn:active {
    background-color: #eee;
}

.btn:disabled {
    cursor: not-allowed;
    background: #f5f5f5;
}

按钮子类

下面是按钮的子类,参照 BootStrap ,我也把按钮的子类区分为 PrimarySuccessDangerInfoWarnLink,下面以 Primary为例,首先定义一般状态下的按钮样式,由于基类样式已经定义了一些一本属性,所以我们只需要定义 background-colorcolorborder-color即可:

.btn-primary {
    color: #fff;
    background-color: #1d7ce3;
    border-color: #1d7ce3;
}

同样定义按钮的 hoverdisabledactivefocus 的状态:

.btn-primary:hover {
    color: #fff;
    background-color: #1c70cc;
    border-color: #1c70cc;
}

.btn-primary:active {
    color: #fff;
    background-color: #1a68bc;
    background-color: #1a68bc;
}

.btn-primary:disabled {
    background: #74b5fc;
}

其它


.btn-success {
    color: #fff;
    background-color: #20be44;
    border-color: #20be44;
}

.btn-success:hover {
    color: #fff;
    background-color: #1da73d;
    border-color: #1da73d;
}

.btn-success:active {
    color: #fff;
    background-color: #1b9838;
    border-color: #1d9f3b;
}

.btn-success:disabled {
    background: #74e28d;
}

.btn-danger {
    color: #fff;
    background-color: #eb2a2a;
    border-color: #eb2a2a;
}

.btn-danger:hover {
    color: #fff;
    background-color: #d42a2a;
    border-color: #d42a2a;
}

.btn-danger:active {
    color: #fff;
    background-color: #b92020;
    border-color: #b92020;
}

.btn-danger:disabled {
    background: #ee7171;
}

.btn-warning {
    color: #fff;
    background-color: #fbc305;
    border-color: #fbc305;
}

.btn-warning:hover {
    color: #fff;
    background-color: #eab708;
    border-color: #eab708;
}

.btn-warning:active {
    color: #fff;
    background-color: #d6a707;
    background-color: #d6a707;
}

.btn-warning:disabled {
    background: #fadc77;
}

.btn-link {
    color: #1c70cc;
    border-color: transparent;
    background: transparent;
}

.btn-link:hover {
    text-decoration: underline;
    background: transparent;
}

.btn-link:active {
    color: #e53c0a;
}

.btn-link:disabled {
    background: transparent;
    color: #92c2f6;
}

Size

定义了按钮的基本状态后,我们还可以定义按钮的大小:

.btn-large {
    font-size: 16px;
    padding: 8px 16px;
    border-radius: 6px;
}

.btn-mini {
    font-size: 8px;
    padding: 3px 6px;
    border-radius: 2px;
}

Block

.btn-block {
    display: block;
    width: 100%;
}

效果

技术图片

欢迎批评指正

源码地址

https://github.com/LaosanShang/ls-admin-frontend

东拼西凑完成一个“前端框架”(6) - 按钮

标签:inf   frontend   primary   子类   vertica   success   16px   tran   strong   

原文地址:https://www.cnblogs.com/xinwang/p/12169190.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!