a.btn{ display: inline-block; /* インラインブロック化 */ padding: 1em 2em; /* 余白設定 */ line-height: 1; /* 行の高さ */ color: #fff; background-color: #2196f3; text-decoration: none; } a.btn:hover{ background-color: #42a5f5; } point paddingの値を上下1em、左右2emくらいにすると、フラットデザインっぽくなる。ここまで広げなくてもいいけど、狭いとダサくなるので、それなりに余裕ある数値にするといい感じ。 角丸に demo ボタンリンク a.btn{ display: inline-block; padding: 1em 2em; line-height: 1; color: #fff; b
![cssによるボタンデザインの備忘録 - FOXISM](https://cdn-ak-scissors.b.st-hatena.com/image/square/b806c4fc6247a1043f610388cdb3d6d598aa6ea8/height=288;version=1;width=512/https%3A%2F%2Ffoxism.jp%2Fwp-content%2Fuploads%2F2020%2F12%2F20170708130032.jpg)