Using CSS3 to achieve material design effect

This article mainly introduced the pure CSS3 realizes the 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>

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!