快捷搜索:

如何写好css系列之button

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

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

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

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

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

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

图片 1

三、实现具体细节阐述

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

图片 2

说明:

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

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

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

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

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

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

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

3.1. button的实现代码解析

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

  1. html结构

  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前端框架整体理解还没达到高级水平。所以在文章逻辑结构和语言的时候存在诸多问题,希望各位朋友、前辈指教。源码下载

本文由加拿大28走势图发布于美术,转载请注明出处:如何写好css系列之button

您可能还会对下面的文章感兴趣: