CSS でボタンを作るとき、背景のグラデーションとボーダーをグレースケールの RGBA にしたものをもとにすると、背景色やフォントを変えるだけでバリエーションが作れるので便利です。 button { background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); background-origin: border-box; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0.25em; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px rgba(255, 255, 255, 0.1); cursor: pointer; display: inline-block; line-he
![CSS ボタンのグラデーションとボーダーをグレースケールの RGBA で](https://cdn-ak-scissors.b.st-hatena.com/image/square/8adc00cc00ab08961bbe4c3e9540ce53968e0c3e/height=288;version=1;width=512/https%3A%2F%2Fterkel.jp%2Fapple-touch-icon.png)