ふわっとした影がある 角が丸いボタン 横幅固定 HTML/CSS サンプル

ふわっとした影がある 角が丸いボタン 横幅固定 HTML/CSS サンプル

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影の指定

ボタンカテゴリの最新記事