如何写好css系列之button

      现代前端行业的发展,如果你在css的时候,还没有利用一些预编译工具,是否觉得自己太low了。但你是否考虑过搭建一套自己前端框架。可能你会想这是否有必要,因为基础有boostrap,组件库有:easyui,elementui,iview,ionic等等。但我个人练习自己如何写好一个css框架,对自己前端能力的提升还是有帮助的。所以本人以此为目标和动力。展开了这个系列的博客之旅。开篇以button为起点。

一、与美术交流获取得这些信息

1. 按钮状态:普通状态、鼠标悬停、选中状态、禁用状态

2. 按钮形状:常用形状(有背景),简单形状(无背景),图标按钮、多文字按钮、fullwidth按钮

3. 其他:按钮可以分组、a标签与button标签表现要一致

二、已实现的示例效果展示

三、实现具体细节阐述

本次使用sass作用css的预编译器,代码结构如下:

说明:

1. _button.scss:实现按钮的基本形状和状态;

2. _button.plain.scss:实现简单迎按钮的形状和行为,其中还包含了去掉边框的样式

3. _button.onlyIcon.scss:图标按钮的实现,在这里申明:图标都是使用的font-awesome。

4. _button.link.scss:对按钮扩充为a标签也能支持

5. _button.group.scss:按钮分组

6. _variable.scss:相关变量定义文件

7. main.scss:编译文件入口。其他文件夹是表明后期会实现的模块。

3.1. button的实现代码解析

代码分为两部分,一部分为html结构,一部分为css代码

1. html结构

<button class="f-btn f-btn-primary-norm multi plain noborder">
        <span class="fa fa-address-book"></span><span>有个图标</span>
    </button>

2. sass代码

.f-btn{
    border-radius: $radius-width-base;
    font-family: $font-family;
    cursor: pointer;
    border: 1px solid transparent;
    outline: 0;
    padding: $btn-padding-norm;
    font-size: $font-size;
    line-height: $line-height;
    vertical-align: middle;
    text-align: center;
    transition: background-color .3s;  
    width: 58px;
    white-space: nowrap;
    @each $class, $bgcolor, $color in $colors {
        &.f-btn-#{$class}{
            background-color: $bgcolor;
            color: $color;
            &:hover, &:active{
                background-color: darken($bgcolor, 6%);
            }
            &.disabled, &:disabled{
                @include opacity(.65);
            }
        }
    }
    > .fa{
        margin-right: 4px;
    }
    &.max{
        width: 100%;
        display: block;  
        + .max{
            margin-top: 20px;
        }      
    }
    &.multi{
        width: auto;
        padding: $btn-padding-multi;
    }
}

     从html结构可以看出按钮可以包含两部分(两个span),一个图标,一个文字。首先利用button来修饰按钮的整体形状和状态等信息,然后再将图标和文字span进一步修改即可。

     从sass代码中可以看出,我循环了一个colors数组,这里就是为了创建多种不同状态的按钮,如:正常、警告、提示等,因为他们的背景或字体颜色是有区别的。

3.2. 其他

本人在阐述此篇博客的时候,对css前端框架整体理解还没达到高级水平。所以在文章逻辑结构和语言的时候存在诸多问题,希望各位朋友、前辈指教。源码下载

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

Google官方网页载入速度检测工具PageSpeed Insights 使用教程

相信有接触前端开发的大神们都听说过Google官方的PageSpeed Tools,这个网页载入速度检测工具有在线版本也有一个 Chrome 扩展,叫PageS...

6018
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2 HTML5基础

答:借助HTML5解决和分析工业设计中的问题,易于实现数据可视化,而且支持所有主流操作系统。与传统C/C++/FORTRON计算机语言相比具备几个显著优势:首先...

2160
来自专栏守候书阁

vue组件开发练习--焦点图切换

vue用了有一段时间了,开发的后台管理系统也趋于完善,现在时间比较算是有点空闲吧!这个空闲时间我在研究vue的另外的一些玩法,比如组件,插件等。今天,我就分享一...

2221
来自专栏用户2442861的专栏

chrome使用技巧(看了定不让你失望,不错)

之前有看过刘哇勇写的Chrome 控制台不完全指南,让我觉得瞬间对chrome的了解实在太浅了。对此特意了解了一番(也就是在他的博文上进行了一些总结和了解一些其...

1381
来自专栏葡萄城控件技术团队

程序员Web面试之jQuery

又到了一年一度的毕业季了,青春散场,却等待下一场开幕。 ? 在求职大军中,IT行业的程序员、码农是工科类大学生的热门选择之一, 尤其是近几年Web的如火如荼,更...

25310
来自专栏前端说吧

CSS-自定义高度的元素背景图如何自适应以及after伪类在ie下的处理

3308
来自专栏互联网杂技

开始学习React js

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件...

4156
来自专栏pangguoming

svg矢量图绘制以及转换为Android可用的VectorDrawable资源

项目需要 要在快速设置面板里显示一个VoWiFi图标(为了能够区分出来图形,我把透明的背景填充为黑色了) ? 由于普通图片放大后容易失真,这里我们最好用矢量图(...

4749
来自专栏iKcamp

React 深入系列2:组件分类

文:徐超,《React进阶之路》作者 授权发布,转载请注明作者及出处 ---- React 深入系列2:组件分类 React 深入系列,深入讲解了...

3945
来自专栏河湾欢儿的专栏

03-保存

存储所需内容 ctrl+c ctrl+n ctrl+v 或者直接拖动文件至新文件

882

扫码关注云+社区

领取腾讯云代金券