Ways to implement material design effects using CSS3

This article mainly introduces the method of using CSS3 to realize material design effect. is the original component based on the label attributes have been beautified, with a certain reference value, interested can understand.

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>