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

目录

写在前面

完成了整体框架的工作，下面开始写一些组件；从按钮开始，设计的思路主要参照 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;

}

定义了常规状态后，我们还需要定义按钮的 hover、disabled、active、focus的状态：

.btn:focus {

outline: 0;

}

.btn:hover {

background-color: #f6f6f6;

}

.btn:active {

background-color: #eee;

}

.btn:disabled {

cursor: not-allowed;

background: #f5f5f5;

}

按钮子类

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

.btn-primary {

color: #fff;

background-color: #1d7ce3;

border-color: #1d7ce3;

}

同样定义按钮的 hover、disabled、active、focus 的状态：

.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%;

}

效果

欢迎批评指正

源码地址

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[东拼西凑完成一个“前端框架”(6) - 按钮]http://www.zyiz.net/tech/detail-98728.html