CSS3 implementing sample code sharing for material design

Constantly updated in

Preview

This is a perfect CSS file, is the original component based on the label attributes are done to beautify, datepicker,select, etc. can not be implemented with CSS temporarily not considered in this article.

Buttons button

Initial button

    <button>button</button>    <button class= "Red" >red</button>    <button class= " Orange ">orange</button>    <button class=" Blue ">blue</button>    <button class=" Green " >green</button>    <button class= "link" >link</button>

Stroke button

    <button class= "b-red bk-n" >button</button>    <button class= "b-red" >red</button>    <button class= "B-orange" >orange</button>    <button class= "B-blue" >blue</button>    <button class= "B-green" >green</button>

Disable button

    <button disabled>disabled</button>

Float button

    <button class= "Circle" >+</button>    <button class= "Circle Teal" >+</button>

Button Group

    <nav class= "Btn-group" >        <button>button</button>        <button>button</button>        <button>button</button>    </nav>

Form form

Text input

<input type= "text" ><input type= "password" >

Switch

<input type= "checkbox" id= "switch1" class= "switch" ><label for= "Switch1" ></label>

Radio

<input type= "Radio" id= "Test_radio1" name= "RA" ><label for= "Test_radio1" >radio1</label><input Type= "Radio" Disabled id= "Test_radio3" name= "RA" ><label for= "Test_radio3" >radio3</label><input Type= "Radio" checked disabled id= "Test_radio4" Name= "ras" ><label for= "Test_radio4" >radio4</label>

Multi-Select

<input id= "Test_checkbox1" type= "checkbox" ><label for= "Test_checkbox1" >check1</label><input id= "Test_checkbox3" Disabled type= "checkbox" ><label for= "TEST_CHECKBOX3" >check3</label><input ID = "Test_checkbox4" checked disabled type= "checkbox" ><label for= "Test_checkbox4" >check4</label>

Partial styles

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {Display:block}audio    , Canvas,progress,video {display:inline-block;    Vertical-align:baseline}audio:not ([controls]) {Display:none; height:0}[hidden],template {display:none}li {list-style:none}a {Background-color:transparent}a:active,a:ho ver {outline:0}abbr[title] {border-bottom:1px Dotted}b,strong {font-weight:700}dfn {font-style:italic}    h1 {font-size:2em;    margin:. 67em 0}mark {background: #ff0;    Color: #000}small {font-size:80%}sub,sup {font-size:75%;    line-height:0;    position:relative; Vertical-align:baseline}sup {top:-.5em}sub {bottom:-.25em}img {border:0}svg:not (: root) {Overflow:hidd    en}figure {margin:1em 40px}hr {box-sizing:content-box;    Height:0}pre {overflow:auto}code,kbd,pre,samp {font-family:monospace, monospace; Font-size:1em}button,input,optgroup,select,tExtarea {color:inherit;    Font:inherit; Margin:0}button {overflow:visible}button,select {text-transform:none}button,html input[type=button],input[type=    Reset],input[type=submit] {-webkit-appearance:button; Cursor:pointer}button[disabled],html input[disabled] {cursor:default}button::-moz-focus-inner,input::-    Moz-focus-inner {border:0;    Padding:0}input {Line-height:normal}input[type=checkbox],input[type=radio] {box-sizing:border-box; Padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {height:    Auto}input[type=search] {-webkit-appearance:textfield; box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-    webkit-search-decoration {-webkit-appearance:none}fieldset {border:1px solid silver;    margin:0 2px;    padding:. 35em. 625em. 75em}legend {border:0; Padding:0}textarea {overflow:auto}optgroup {font-weight:700}table {border-collapse:collapse;    border-spacing:0}td,th {padding:0}/*html*/html {font-family:sans-serif;    -ms-text-size-adjust:100%;    -webkit-text-size-adjust:100%}/*body*/body{margin:0;    Background-color:rgb (238,238,238);    font-size:16px;    padding:20px;    -webkit-box-sizing:border-box;    Box-sizing:border-box;    font-family: "Microsoft Yahei";    Color: #333; text-shadow:0 0 0.1px Rgba (0,0,0,0.2);}        /*button*/button {opacity:0.9;        Line-height:1rem;        Padding:0.5rem 1rem;        Border:none;      Outline:none;      Background-color:white;      Text-decoration:none;      position:relative;      border-radius:2px; box-shadow:0      1px 3px Darkgray;    Transition:box-shadow 0.5s ease-out;    } button::before{content: ';      Display:block;      Position:absolute;      left:50%;      top:50%;      border-radius:10%/40%;      -webkit-transform:translate (-50%,-50%); Transform:translate (-50%,-50%);      height:100%;      width:100%;      Z-index:-1;      -webkit-transition:all 0.5s cubic-bezier (0.23, 0.95, 0.56, 1);  Transition:all 0.5s cubic-bezier (0.23, 0.95, 0.56, 1); } button:hover{box-shadow:0      6px 16px Darkgray;  Transition:all 0.8s ease-out;      }button:active{opacity:1;      -webkit-transition:all 0.5s ease-out;  Transition:all 0.3s Ease-out;}      button:active::before{width:0;      height:100%;      border-radius:0;      Background-color:rgba (0,0,0,.4);      -webkit-transition:all 0.01s ease-out;  Transition:all 0.01s ease-out;    }button.link{Background:none;    Color: #0275d8; Box-shadow:none;}    button[disabled]{Background-color:lightgray;    Color:darkgray;    cursor:not-allowed; Box-shadow:none;}. circle{border-radius:100%;}    button.circle{padding:0;      Width:3rem;height:3rem;font-size:1.5rem; box-shadow:0 6px 12px Darkgray;} button.circle:hover{box-shadow:0 12px 24px Darkgray;} Button.circle::before{content: ";      Display:block;      Position:absolute;      left:50%;      top:50%;      border-radius:100%;      -webkit-transform:translate (-50%,-50%);      Transform:translate (-50%,-50%);      height:100%;      width:100%;      Z-index:-1;      -webkit-transition:all 0.5s cubic-bezier (0.23, 0.95, 0.56, 1);  Transition:all 0.5s cubic-bezier (0.23, 0.95, 0.56, 1);      } button.circle:active::before{width:0;      height:0;      border-radius:100%;      Background-color:rgba (0,0,0,.4);      -webkit-transition:all 0.01s ease-out;  Transition:all 0.01s ease-out;    }/*form*/input[type=text],input[type=password],input[type=number]{padding:0;    Border:none;    Text-indent:0.5em;    Background:none;    Outline:none;    border-bottom:2px solid #555;        line-height:32px;    height:32px; Box-sizing:border-box;}    input[type=text]:focus,input[type=password]:focus,input[type=number]:focus{Border-bottom-color:rgb (0,150,136); COlor:rgb (0,150,136);} input[type=checkbox],input[type=radio]{Display:none;}    input[type=checkbox]+label,input[type=radio]+label{line-height:1em;    Text-indent:1.2em;    Width:1em;    Height:1em;    Margin:0.2em 0.1em;    border:2px solid #555;    border-radius:2px;    padding:0px;    Display:inline-block;    position:relative; Cursor:pointer;} input[type=radio]+label{Border-radius:1em;} input[type=checkbox]:checked+label,input[type=radio]:checked+label{Border-color:rgb (0,150,136);}    input[type=checkbox]:checked + label:after{content: ';    Display:block;    Width:0.7em;    Height:0.3em;    Margin:0.2em 0.1em;    top:0;    left:0;    Transform:rotate ( -45DEG);    -moz-transform:rotate ( -45DEG);    -webkit-transform:rotate ( -45DEG);    Position:absolute;    Border-left:0.15em solid RGB (238,238,238); Border-bottom:0.15em solid RGB (238,238,238);}    input[type=radio]:checked + label{Background:rgb (0,150,136); box-shadow:0 0 0 3px rgb (238,238,238) inset;}    Input[type=checkbox] + Label:before,input[type=radio] + label:before{content: ";      Display:block;      Position:absolute;      left:50%;      top:50%;      border-radius:100%;      -webkit-transform:translate (-50%,-50%);      Transform:translate (-50%,-50%);      Height:4em;      Width:4em;      Z-index:-1;      -webkit-transition:all 0.5s cubic-bezier (0.23, 0.95, 0.56, 1);  Transition:all 0.5s cubic-bezier (0.23, 0.95, 0.56, 1);}      input[type=checkbox]+ label:active::before,input[type=radio]+ label:active::before{width:0;      height:0;      border-radius:100%;      Background-color:rgb (0,150,136);      -webkit-transition:all 0.01s ease-out;  Transition:all 0.01s ease-out;      } input[type=checkbox]:checked+ label:active::before,input[type=radio]:checked+ label:active::before{  Background-color:gray;    }input[type=checkbox]:checked + label,input[type=radio]:checked + Label {BACKGROUND-COLOR:RGB (0,150,136); Color:rgb (0,150,136);} Input[type=checkbox] + label:active, input[type=checkbox]:checked + Label:active,input[type=radio] + label:active, Input[type=radio]:checked + label:active {background-color:rgb (0,150,136);} Input[type=checkbox]:d isabled + label, I Nput[type=radio]:d isabled + label{Border-color:lightgray;color:lightgray;background-color:lightgray; Pointer-events:none;    } input[type=checkbox].switch+label{left:0;    Border-radius:1em; Border-color:gray;    } input[type=checkbox]:checked.switch+label{left:1.5em;  Border-color:rgb (0,150,136);     } input[type=checkbox].switch+label:after{content: "";     Position:absolute;     Display:block;    margin-top:50%;    border-bottom:2px solid lightgray;    Width:1.4em;    height:0;    Transform:rotate (0DEG);    -moz-transform:rotate (0DEG);    -webkit-transform:rotate (0DEG); Margin-left:1.1em;     } input[type=checkbox]:checked.switch+label:after{border-bottom:2px solid rgb (0,150,136); Margin-left: -1.1em; }nav.btn-group{border-radius:2px;overflow:hidden;float:left;} nav.btn-group button{float:left;border-radius:0; Box-shadow:none;   } nav.btn-group button:hover{Box-shadow:none;    } nav.btn-group button:hover::after{content: "";    Display:block;    Position:absolute;    width:100%;    height:100%;    top:0;    left:0; Background:rgba (0, 0, 0, 0.11);} nav.menu{height:3rem;padding:0 1em;background:white;} nav.menu>ul{padding:0 1em;margin:0;line-height:3rem;float:left;} mav.menu>ul>li{Display:block;}. b-red{border:1px solid #d9534f; color: #d9534f;}. b-orange{border:1px solid #ec971f; color: #ec971f;}. b-blue{border:1px solid #5CA3DE; color: #5CA3DE;}. b-green{border:1px solid #71CA71; color: #71CA71;}. B-navy {border:1px solid #001f3f; color: #001f3f;}. B-aqua {border:1px solid #7fdbff; color: #7fdbff;}. B-teal {border:1px solid rgb (0,150,136); Color:rgb (0,150,136);}. b-olive {border:1px solid #3d9970; color: #3d9970;}. B-lime {Border: 1px solid #01ff70; color: #01ff70; }.b-yellow {border:1px solid #ffdc00; color: #ffdc00;}. B-orange {border:1px solid #ff851b; color: #ff851b;}. b-red {border:1px solid #ff4136; color: #ff4136;}. B-fuchsia {border:1px solid #f012be; color: #f012be;}. b-purple {border:1px solid #b10dc9; color: #b10dc9;}. B-maroon {border:1px solid #85144b; color: #85144b;}. B-white {border:1px solid #ffffff; color: #ffffff;}. B-gray {border:1px solid #aaaaaa; color: #aaaaaa;}. B-silver {border:1px solid #dddddd; color: #dddddd;}. B-black {border:1px solid #111111; color: #111111;}. Bk-n{background:none;}. Bs-n{box-shadow:none;}. Red{background-color: #d9534f; color:white;}. Orange{background-color: #ec971f; color:white;}. Blue{background-color: #5CA3DE; color:white;}. Green{background-color: #71CA71; color:white;}. Navy {background-color: #001f3f; color:white;}. Aqua {background-color: #7fdbff; color:white;}. Teal {Background-color:rgb (0,150,136); color:white;}. Olive {background-color: #3d9970; Color:white;}. Lime {background-color: #01ff70;}. Yellow {background-color: #ffdc00;}. Orange {background-color: #ff851b;}. Red {background-color: #ff4136;}. Fuchsia {background-color: #f012be;}. Purple {background-color: #b10dc9;}. Maroon {background-color: #85144b;}. White {background-color: #ffffff;}. Gray {background-color: #aaaaaa;}. Silver {background-color: #dddddd;}. Black {background-color: #111111;}. C-red{color: #d9534f;}. C-orange{color: #ec971f;}. C-blue{color: #5CA3DE;}. C-green{color: #71CA71;}. C-navy {color: #001f3f;}. C-aqua {color: #7fdbff;}. c-teal {Color:rgb (0,150,136);}. c-olive {color: #3d9970;}. c-lime {color: #01ff70;}. C-yellow {color: #ffdc00;}. C-orange {color: #ff851b;}. c-red {color: #ff4136;}. C-fuchsia {color: #f012be;}. c-purple {color: #b10dc9;}. C-maroon {color: #85144b;}. c-white {color: #ffffff;}. C-gray {color: #aaaaaa;}. c-silver {color: #dddddd;}. c-black {color: #111111;}. Fl,.fl *{display:block;float:left;clear:none;}. Fl-l{float:left}.fl-r{float:right}.fl-n{float:none}.w-1 {width:4.166666667%}.w-2 {width:8.333333333%}.w-3 {width: 12.5%}.w-4 {width:16.66666667%}.w-5 {width:20.83333333%}.w-6 {width:25%}.w-7 {width:29.16666667%}.w-8 {width: 33.33333333%}.w-9 {width:37.5%}.w-10 {width:41.66666667%}.w-11 {width:45.83333333%}.w-12 {width:50%}.w-13 {width: 54.16666667%}.w-14 {width:58.33333333%}.w-15 {width:62.5%}.w-16 {width:66.66666667%}.w-17 {width:70.83333333%}. w-18 {width:75%}.w-19 {width:79.16666667%}.w-20 {width:83.33333333%}.w-21 {width:87.5%}.w-22} {width:91.66666667%}. w-23 {width:95.83333333%}.w-24 {width:100%}.h-1 {height:16px;line-height:16px;}. h-2 {height:28px;line-height:28px;}. h-3 {height:32px;line-height:32px;}. h-4 {height:48px}.h-5 {height:64px}.h-6 {height:80px}.h-7 {height:96px}.t-l{text-align:left}.t-c{text-align:center }.t-r{text-align:right}.f,.f *{display:flex}.f-1 {flex:1}.f-2 {flex:2}.f-3 {flex:3}.f-4 {flex:4}.f-5} {fle x:5}.f-6 {FLex:6}.f-7 {flex:7}.f-8 {flex:8}.f-9 {flex:9}.f-10{flex:10}.f-11{flex:11}.f-12{flex:12}.f-13{flex:13}.f-14{flex:14 }.f-15{flex:15}.f-16{flex:16}.f-17{flex:17}.f-18{flex:18}.f-19{flex:19}.f-20{flex:20}.f-21{flex:21}.f-22{flex : 22}.f-23{flex:23}.f-24{flex:24}