https://medium.com/nextux/design-better-buttons-6b64eb7f13bc
ボタンデザインの良い例・悪い例を画像を使って解説しています。
同じタイプのボタンは同じスタイルにする
ボタンの現在の状況を視覚的にわかるようにする
種類によってボタンを区別する
ボタンのスタイルを統一する
ボタンじゃないものがボタンのように見えないように
大文字小文字の使い方に一貫性を持たせる
使いどころではアイコンを使う
長いラベルテキストは避ける
ラベルテキストで行動を明確に伝える
リンク同士の間に空白を
ラベルテキストを折り返さない
ラベルテキストがボタンの幅より長くてはいけない
図1 ボタンデザインの良い例・悪い例
https://yoksel.github.io/grid-cheatsheet/
CSS Gridの使い方がまとまったページです。プレビューを見ながら、各プロパティの値を切り替えて確認することができます。
1枚の長いページになっていて、左のメニューから該当箇所に移動できます。