マテリアルデザインは単なるデザインにとどまらず、アニメーションも大事な要素になります。ユーザがタッチした、スワイプしたといったアクションに対して適切なフィードバックがあってこそです。そのため、デザインの敷居が高くなっています。 そこで使ってみたいのがMatterです。ピュアなCSSだけで作られたマテリアルコンポーネントです。

Matterの使い方

デモです。ボタンやチェックボックスなど様々なコンポーネントが並んでいます。

テキストフィールドについても様々なデザインが用意されています。

色を動的に変更できます。

ダークモードっぽい仕上げも。

MatterはCSSだけで作られているのが魅力です。様々なWebサイトの中で利用できるでしょう。CSSだけで実装されていれば、参考になる部分も多そうです。自分のサイトにそのまま組み込んだり、Matterを参考にマテリアルデザインを取り込むこともできるでしょう。

MatterはCSS製のオープンソース・ソフトウェア（MIT License）です。

CodePen - Pure CSS Material Components Showcase finnhvman/matter: Material Components in Pure CSS