How to write the css series button and cssbutton

How to write the css series button and cssbutton

In the development of the modern front-end industry, if you haven't used some pre-compilation tools while using css, do you think you are too low. But have you considered building your own front-end framework. You may wonder if this is necessary, because the foundation includes bootup, Component Libraries include easyui, elementui, iview, ionic, and so on. However, I personally practice how to write a css framework, which is helpful for improving my front-end capabilities. Therefore, I take this as my goal and motivation. Start this series of blogs. Start with a button.

I. obtain this information through communication with Art

1. Button status: Normal, hover, selected, and disabled

2. button shape: common shape (with background), simple shape (without background), icon button, multi-text button, fullwidth button

3. Others: buttons can be grouped. The expression of tag a must be consistent with that of tag button.

Ii. Demo results that have been implemented

Iii. Implementation Details

This time, sass is used as the pre-compiler of css. The code structure is as follows:

Note:

1. _ button. scss: implement the basic shape and status of the button;

2. _ button. plain. scss: implements the shape and behavior of a simple welcoming button. It also contains the style for removing the border.

3. _ button. onlyIcon. scss: icon button implementation. Here, it is stated that the icons are all font-awesome.

4. _ button. link. scss: button can be expanded to a label.

5. _ button. group. scss: button group

6. _ variable. scss: variable definition file

7. main. scss: file compilation portal. Other folders indicate the modules that will be implemented later.

3.1. code parsing for button implementation

The Code consists of two parts: html structure and css code.

1. html Structure

<Button class = "f-btn-primary-norm multi plain noborder"> <span class = "fa-address-book"> </span> <span> there is an icon </span> </button>

2. sass code

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

From the html structure, we can see that the button can contain two parts (two spans), one icon and one text. First, use the button to modify the overall shape and status of the button, and then modify the icon and text span.

From the sass code, we can see that I loop through a colors array, which is used to create buttons in different states, such as normal, warning, and prompt, because their background or font colors are different.

3.2. Miscellaneous

When I elaborate on this blog, the overall understanding of the css front-end framework has not reached the level of advanced level. Therefore, there are many problems in the logic structure and language of the Article. I hope you will give your advice. Source code download