<header>
    Pure CSS Material Components Showcase
</header>
<nav>UPDATE! This has been open-sourced here: <a href="https://github.com/finnhvman/matter" target="_top">https://github.com/finnhvman/matter</a></nav>
<main class="grid">
    <div></div>
    <div class="column">Enabled</div>
    <div class="column">Disabled</div>

    <a class="title" href="https://codepen.io/finnhvman/pen/MQyJxV" target="_top">Button - Contained</a>
    <div><button class="pure-material-button-contained">Contained</button></div>
    <div><button class="pure-material-button-contained" disabled>Contained</button></div>

    <a class="title" href="https://codepen.io/finnhvman/pen/GYaWdV" target="_top">Button - Outlined</a>
    <div><button class="pure-material-button-outlined">Outlined</button></div>
    <div><button class="pure-material-button-outlined" disabled>Outlined</button></div>

    <a class="title" href="https://codepen.io/finnhvman/pen/YeXwNY" target="_top">Button - Text</a>
    <div><button class="pure-material-button-text">Text</button></div>
    <div><button class="pure-material-button-text" disabled>Text</button></div>

    <a class="title" href="https://codepen.io/finnhvman/pen/zpygBB" target="_top">Checkbox</a>
    <div class="checkboxes">
        <label class="pure-material-checkbox">
            <input type="checkbox">
            <span>Unchecked</span>
        </label>
        <label class="pure-material-checkbox">
            <input type="checkbox" checked>
            <span>Checked</span>
        </label>
        <label class="pure-material-checkbox">
            <input type="checkbox">
            <span>Indeterminate</span>
        </label>
    </div>
    <div class="checkboxes">
        <label class="pure-material-checkbox">
            <input type="checkbox" disabled>
            <span>Unchecked</span>
        </label>
        <label class="pure-material-checkbox">
            <input type="checkbox" checked disabled>
            <span>Checked</span>
        </label>
        <label class="pure-material-checkbox">
            <input type="checkbox" disabled>
            <span>Indeterminate</span>
        </label>
    </div>

    <a class="title" href="https://codepen.io/finnhvman/pen/vVwJbq" target="_top">Radio Buttons</a>
    <div class="radios">
        <label class="pure-material-radio">
            <input type="radio" name="group-enabled">
            <span>Unchecked</span>
        </label>
        <label class="pure-material-radio">
            <input type="radio" name="group-enabled" checked>
            <span>Checked</span>
        </label>
    </div>
    <div class="radios">
        <label class="pure-material-radio">
            <input type="radio" name="group-disabled" disabled>
            <span>Unchecked</span>
        </label>
        <label class="pure-material-radio">
            <input type="radio" name="group-disabled" checked disabled>
            <span>Checked</span>
        </label>
    </div>

    <a class="title" href="https://codepen.io/finnhvman/pen/pOeyjE" target="_top">Switch</a>
    <div class="switches">
        <label class="pure-material-switch">
            <input type="checkbox">
            <span>Off</span>
        </label>
        <br/>
        <label class="pure-material-switch">
            <input type="checkbox" checked>
            <span>On</span>
        </label>
    </div>
    <div class="switches">
        <label class="pure-material-switch">
            <input type="checkbox" disabled>
            <span>Off</span>
        </label>
        <br/>
        <label class="pure-material-switch">
            <input type="checkbox" checked disabled>
            <span>On</span>
        </label>
    </div>

    <a class="title" href="https://codepen.io/finnhvman/pen/LJWJVR" target="_top">Slider</a>
    <div>
        <label class="pure-material-slider">
            <input type="range" min="0" max="100">
            <span>Slider</span>
        </label>
    </div>
    <div>
        <label class="pure-material-slider">
            <input type="range" min="0" max="100" disabled>
            <span>Slider</span>
        </label>
    </div>

    <a class="title" href="https://codepen.io/finnhvman/pen/bmNdNr" target="_top">Progress - Circular</a>
    <div><progress class="pure-material-progress-circular"></progress></div>
    <div></div>

    <a class="title" href="https://codepen.io/finnhvman/pen/OBLZRX" target="_top">Progress - Linear</a>
    <div class="progresses">
        <progress class="pure-material-progress-linear" value="0" max="100"></progress>
        <progress class="pure-material-progress-linear"></progress>
    </div>
    <div></div>

    <a class="title" href="https://codepen.io/finnhvman/pen/bxXPqN" target="_top">Textfield - Filled</a>
    <div class="textfields">
        <label class="pure-material-textfield-filled">
            <input placeholder=" ">
            <span>Empty</span>
        </label>
        <label class="pure-material-textfield-filled">
            <input placeholder=" " value="Some text">
            <span>Non-empty</span>
        </label>
        <label class="pure-material-textfield-filled">
            <textarea placeholder=" "></textarea>
            <span>Empty Textarea</span>
        </label>
        <label class="pure-material-textfield-filled">
            <textarea placeholder=" ">Some text</textarea>
            <span>Non-empty Textarea</span>
        </label>
    </div>
    <div class="textfields">
        <label class="pure-material-textfield-filled">
            <input placeholder=" " disabled>
            <span>Empty</span>
        </label>
        <label class="pure-material-textfield-filled">
            <input placeholder=" " value="Some text" disabled>
            <span>Non-empty</span>
        </label>
        <label class="pure-material-textfield-filled">
            <textarea placeholder=" " disabled></textarea>
            <span>Empty Textarea</span>
        </label>
        <label class="pure-material-textfield-filled">
            <textarea placeholder=" " disabled>Some text</textarea>
            <span>Non-empty Textarea</span>
        </label>
    </div>

    <a class="title" href="https://codepen.io/finnhvman/pen/xyOORQ" target="_top">Textfield - Outlined</a>
    <div class="textfields">
        <label class="pure-material-textfield-outlined">
            <input placeholder=" ">
            <span>Empty</span>
        </label>
        <label class="pure-material-textfield-outlined">
            <input placeholder=" " value="Some text">
            <span>Non-empty</span>
        </label>
        <label class="pure-material-textfield-outlined">
            <textarea placeholder=" "></textarea>
            <span>Empty Textarea</span>
        </label>
        <label class="pure-material-textfield-outlined">
            <textarea placeholder=" ">Some text</textarea>
            <span>Non-empty Textarea</span>
        </label>
    </div>
    <div class="textfields">
        <label class="pure-material-textfield-outlined">
            <input placeholder=" " disabled>
            <span>Empty</span>
        </label>
        <label class="pure-material-textfield-outlined">
            <input placeholder=" " value="Some text" disabled>
            <span>Non-empty</span>
        </label>
        <label class="pure-material-textfield-outlined">
            <textarea placeholder=" " disabled></textarea>
            <span>Empty Textarea</span>
        </label>
        <label class="pure-material-textfield-outlined">
            <textarea placeholder=" " disabled>Some text</textarea>
            <span>Non-empty Textarea</span>
        </label>
    </div>

    <a class="title" href="https://codepen.io/finnhvman/pen/GyzbEj" target="_top">Textfield - Standard</a>
    <div class="textfields">
        <label class="pure-material-textfield-standard">
            <input placeholder=" ">
            <span>Empty</span>
        </label>
        <label class="pure-material-textfield-standard">
            <input placeholder=" " value="Some text">
            <span>Non-empty</span>
        </label>
        <label class="pure-material-textfield-standard">
            <textarea placeholder=" "></textarea>
            <span>Empty Textarea</span>
        </label>
        <label class="pure-material-textfield-standard">
            <textarea placeholder=" ">Some text</textarea>
            <span>Non-empty Textarea</span>
        </label>
    </div>
    <div class="textfields">
        <label class="pure-material-textfield-standard">
            <input placeholder=" " disabled>
            <span>Empty</span>
        </label>
        <label class="pure-material-textfield-standard">
            <input placeholder=" " value="Some text" disabled>
            <span>Non-empty</span>
        </label>
        <label class="pure-material-textfield-standard">
            <textarea placeholder=" " disabled></textarea>
            <span>Empty Textarea</span>
        </label>
        <label class="pure-material-textfield-standard">
            <textarea placeholder=" " disabled>Some text</textarea>
            <span>Non-empty Textarea</span>
        </label>
    </div>

    <aside>
        <div class="theming">
            <label id="toggle" class="pure-material-switch">
                <input type="checkbox" checked>
                <span>Colors</span>
            </label>
            <label id="primary" class="pure-material-slider">
                <input  type="range" min="0" max="360" value="207">
                <span>Primary</span>
            </label>
            <label id="on-primary" class="pure-material-slider">
                <input type="range" min="0" max="255" value="255">
                <span>On Primary</span>
            </label>
            <label id="surface" class="pure-material-slider">
                <input type="range" min="0" max="255" value="255">
                <span>Surface</span>
            </label>
            <label id="on-surface" class="pure-material-slider">
                <input type="range" min="0" max="255" value="0">
                <span>On Surface</span>
            </label>
        </div>
    </aside>
</main>
<footer>
    <a href="https://codepen.io/collection/nZKBZe/" target="_blank">Pure CSS Material Components</a>
</footer>
:root {
    --pure-material-primary-rgb: 33, 150, 243;
    --pure-material-onprimary-rgb: 255, 255, 255;
    --pure-material-surface-rgb: 255, 255, 255;
    --pure-material-onsurface-rgb: 0, 0, 0;
}

body {
    margin: 0;
    font-family: "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system;
    font-size: 16px;
    color: rgb(var(--pure-material-onsurface-rgb));
    background-color: rgb(var(--pure-material-surface-rgb));
}

header {
    z-index: 1;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 16px;
    color: rgb(var(--pure-material-onprimary-rgb));
    background-color: rgb(var(--pure-material-primary-rgb));
    text-align: center;
    font-size: 36px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

nav {
  padding: 8px 0;
  text-align: center;
  color: rgb(var(--pure-material-surface-rgb));
  background-color: rgb(var(--pure-material-onsurface-rgb));
}

nav > a {
  color: rgb(var(--pure-material-primary-rgb));
}

.grid {
    display: grid;
    margin: 16px auto 64px;
    max-width: 720px;
    grid-template-columns: 200px minmax(240px, 1fr) minmax(240px, 1fr);
    grid-column-gap: 24px;
    grid-row-gap: 32px;
}

.column {
  font-size: 20px;
}

.title {
    padding-left: 40px;
    color: inherit;
    font-size: 18px;
}

.checkboxes > label,
.radios > label {
    display: block;
    margin: 16px 0;
}

.switches > label {
    width: 120px;
}

.switches > label:first-child {
    margin: 0 0 16px;
}

.textfields > label {
    margin: 16px 0;
}

.checkboxes > label:first-child,
.radios > label:first-child,
.textfields > label:first-child {
    margin: 0 0 16px;
}

.checkboxes > label:last-child,
.radios > label:last-child,
.textfields > label:last-child {
    margin: 16px 0 0;
}

.progresses > progress:first-child {
    margin: 0 0 16px;
}

.progresses > progress:last-child {
    margin: 16px 0 0;
}

footer {
    padding: 24px;
    text-align: center;
}

a {
    font-size: 18px;
    color: rgb(var(--pure-material-primary-rgb));
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Theming */
.theming {
    position: fixed;
    left: 0;
    bottom: 0;
    border-radius: 0 8px 0 0;
    padding: 24px 24px 36px;
    color: #000;
    background-color: #eee;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    transform: none;
    transition: transform 0.4s;
}

.theming.hidden {
    transform: translate(-70%, 70%);
}

#toggle {
    margin-bottom: 16px;
}

#toggle > span {
    font-size: 20px;
}

.theming > label {
    display: block;
    color: rgba(0, 0, 0, 0.87);
}

.theming > label > input::-webkit-slider-runnable-track {
    background-color: transparent !important;
    background: linear-gradient(to right, #000, #fff);
}

.theming > label > input::-moz-range-track {
    background-color: transparent !important;
    background: linear-gradient(to right, #000, #fff);
}

.theming > label > input::-moz-range-progress {
    background-color: transparent !important;
}

.theming > label > input::-ms-fill-lower,
.theming > label > input::-ms-fill-upper {
    background-color: transparent !important;
}

.theming > label > input::-ms-track {
    background: linear-gradient(to right, #000, #fff);
}

#primary > input::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

#primary > input::-moz-range-track {
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

#primary > input::-ms-track {
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

/* Overriding */
#on-primary {
    --pure-material-primary-rgb: var(--pure-material-onprimary-rgb);
}

#surface {
    --pure-material-primary-rgb: var(--pure-material-surface-rgb);
}

#on-surface {
    --pure-material-primary-rgb: var(--pure-material-onsurface-rgb);
}

@media only screen and (max-width: 680px) {
    .theming {
        transform: translate(-100%, 70%);
    }
}
document.querySelectorAll('.checkboxes > label:last-child > input').forEach((item) => item.indeterminate = true);

const progress = document.querySelector('.progresses > progress');
setInterval(() => {
    progress.value = progress.value === 100 ? 0 : progress.value + 10;
}, 1000);

// https://codegolf.stackexchange.com/a/150252
const hsl2rgb = (H,S,L)=>[5,3,1].map(i=>A(L*2)*S*([1,Y,0,0,Y,1][(i-~H)%6]-.5)+L,Y=(A=n=>n>1?2-n:n)((H/=60)%2));

document.querySelector('#primary > input').oninput = (event) => {
    const rgb = hsl2rgb(event.target.value, 0.897, 0.541);
    document.body.style.setProperty('--pure-material-primary-rgb', `${Math.round(rgb[0] * 255)}, ${Math.round(rgb[1] * 255)}, ${Math.round(rgb[2] * 255)}`);
};

document.querySelector('#on-primary > input').oninput = (event) => {
    const value = event.target.value;
    document.body.style.setProperty('--pure-material-onprimary-rgb', `${value}, ${value}, ${value}`);
};

document.querySelector('#surface > input').oninput = (event) => {
    const value = event.target.value;
    document.body.style.setProperty('--pure-material-surface-rgb', `${value}, ${value}, ${value}`);
};

document.querySelector('#on-surface > input').oninput = (event) => {
    const value = event.target.value;
    document.body.style.setProperty('--pure-material-onsurface-rgb', `${value}, ${value}, ${value}`);
};

const theming = document.querySelector('.theming');

document.querySelector('#toggle > input').onchange = (event) => {
    if (event.target.checked) {
        theming.classList.remove('hidden');
    } else {
        theming.classList.add('hidden');
    }
};

External CSS

  1. https://codepen.io/finnhvman/pen/MQyJxV
  2. https://codepen.io/finnhvman/pen/GYaWdV
  3. https://codepen.io/finnhvman/pen/YeXwNY
  4. https://codepen.io/finnhvman/pen/zpygBB
  5. https://codepen.io/finnhvman/pen/vVwJbq
  6. https://codepen.io/finnhvman/pen/pOeyjE
  7. https://codepen.io/finnhvman/pen/LJWJVR
  8. https://codepen.io/finnhvman/pen/bmNdNr
  9. https://codepen.io/finnhvman/pen/OBLZRX
  10. https://codepen.io/finnhvman/pen/bxXPqN
  11. https://codepen.io/finnhvman/pen/xyOORQ
  12. https://codepen.io/finnhvman/pen/GyzbEj

External JavaScript

This Pen doesn't use any external JavaScript resources.