Using CSS3 to achieve Material Design effects

This article mainly introduces pure CSS3 to achieve Material Design effect. It is a beautification of native components based on tag attributes, which has certain reference value. Those who are interested can learn about it.

Preview

This is a css file that is being improved. It beautifies the native components based on label attributes. CSS cannot be used for datepicker, select, etc. The implementation is not considered in this article for the time being.

ButtonButton

##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>

##Floating 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

Text input

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

Switch

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

Single choice

<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>

Multiple choice

<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 entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Two commonly used functions of CSS3 rounded corners and gradients

Use CSS3 to match horizontal and vertical screens Screen method

The above is the detailed content of Using CSS3 to achieve Material Design effects. For more information, please follow other related articles on the PHP Chinese website!