CODE
.button {
display: block;
background: #497bd8;
width: 15rem;
padding: 1rem;
border-radius: .6rem;
text-align: center;
color: #FFF;
text-decoration: none;
letter-spacing: .1rem;
box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.15);
}<a class="button" href="https://code-idea.com/">角が丸く影があるボタン</a>DEMO
See the Pen button-sample-005 by CODE IDEA (@codeidea) on CodePen.
MEMO
border-radius の数値を変えると角丸の具合が変わります。小さくするとシャープに、大きくするとかわいいイメージになります。
box-shadow で影を調整します。影を作るうえで、特に理由が無ければ「0,0,0」でRGBに黒を指定するのがよいです。
ぼかされ具合は例で「0.15」となっている箇所で調整します。最高は1、最低は0です。数値を上げれば影が濃くなります。
クラス名、各数値、色の指定、リンク先、文言は用途に合わせて変えてください。
MANUAL
| background | 背景色の指定 |
| width | 横幅の指定 |
| padding | ボタン内の隙間の指定 |
| border-radius | 角丸の指定 |
| text-align | 文字位置の指定 |
| color | 文字色の指定 |
| text-decoration | リンク下線の指定 |
| letter-spacing | 文字間の調整 |
| box-shadow | 影の指定 |
