【CSS】 浮いているボタンを作ろう!【コピペOK】

【CSS】 浮いているボタンを作ろう!【コピペOK】

こんにちは、たっきー(@ryutoblog)です。今回は、cssで浮いている風のボタンデザインを実装していきたいと思います!コピペできるようにソースコードも載せておきます。

自分のサイトにおしゃれなボタンのっけたいな〜

リンクがなんかダサいな・・

こんな悩みを解決していきます。

本記事の内容です!

  • おしゃれなボタン集 (コード付き)
  • まとめ

実は、たったボタン一つでもサイトの見栄えは大きく変わり、クリック率が上昇します

1, ボタン1(シンプル)

このボタンはいたってシンプルな作りになっていて押すと沈むようになっています。この例のように、背景を濃い色にして文字を白にすると見やすくなります

別の例として、背景オレンジ・文字白なんかも見やすいです。

背景・文字色を変えたい場合は、下にある「btn01.css」の25, 26行目を好きな色に書き換えるだけでokです。

✔︎ ボタン1のhtml

<div class="btn-wrapper">
<div class="btn-float btn01">
<a href="#!">任意の文字</a>
</div>
</div>

✔︎ ボタン1のcss

.btn-wrapper {
    text-align: center;
    margin-top: 20px;
}

.btn-float {
    margin: 10px auto;
    border: 1px solid black;
    display: inline-block;
    text-align: center;
}

.btn-float a {
    text-decoration: none;
    color: black;
    display: block;
    padding: 20px 30px;
    font-weight: bold;
}

.btn01 {
    box-shadow: 3px 3px;
}
.btn01 a {
    color: white;
    background-color: #2CA9E1;
}
.btn01:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

2, ボタン2(グラデーションカラー)

このボタンは、背景がグラデーションカラーになっているため目立つデザインになっています。

また、「border-radius」属性を書くことによってリンクに丸みを帯させています。丸みの度合いを変えたい場合は、下の「btn02.css」の22行目の数を大きくすればするほど角が丸くなり、0に近づけるほど角張った形になります。

背景色を変更する場合は同じく「btn02.css」の23行目を書き換えればokです。

グラデーションカラーを、より凝った色にしたい場合は下のページを参照してください!

✔︎ ボタン2のhtml

<div class="btn-wrapper">
<div class="btn-float btn02">
<a href="#!">任意の文字</a>
</div>
</div>

✔︎ ボタン2のcss

.btn-wrapper {
    text-align: center;
    margin-top: 20px;
}

.btn-float {
    margin: 10px auto;
    border: 1px solid black;
    display: inline-block;
    text-align: center;
}
.btn-float a {
    text-decoration: none;
    color: black;
    display: block;
    padding: 20px 30px;
    font-weight: bold;
}

.btn02 {
    box-shadow: 3px 3px;
    border-radius: 5px;
    background: linear-gradient(white 0%, #2CA9E1 100%);
}
.btn02:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

3, ボタン3(リンク文字に影)

このボタンは、リンクの文字に影をつけることによって文字そのものが浮いているように見せています。

背景を濃い色にしたい(緑や紫など)という方にとっては、リンクの文字がより強調されるので向いているデザインです!

リンク文字の影の色や位置を調整したい場合は、下の「btn03.css」の23行目を書き換えればokです。

23行目の「text-shadow」の各値の意味は、左から順に

  1. 横軸( x軸 )のどの位置に影を出すか( – にすれば文字の左側にでる)
  2. 縦軸( y軸 )のどの位置に影を出すか( – にすれば文字の上側にでる)
  3. どれくらい影をぼかすか(値が大きい穂がぼんやりした影になる)

となっています!

✔︎ ボタン3のhtml

<div class="btn-wrapper">
<div class="btn-float btn03">
<a href="#!">任意の文字</a>
</div>
</div>

✔︎ ボタン3のcss

.btn-wrapper {
    text-align: center;
    margin-top: 20px;
}

.btn-float {
    margin: 10px auto;
    border: 1px solid black;
    display: inline-block;
    text-align: center;
}
.btn-float a {
    text-decoration: none;
    color: black;
    display: block;
    padding: 20px 30px;
    font-weight: bold;
}

.btn03 {
    background-color: #2CA9E1;
    box-shadow: 3px 3px;
    text-shadow: 2px 2px 3px white;
}
.btn03:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

まとめ

今回は、cssで浮いている風のボタンデザインを実装しました。

事実、ボタン一つでサイトの見栄えは大きく変わり、クリック率は上昇します。

たかがボタンとバカにせず、時間のあるうちにきちんとボタンの設定をしておきましょう!

では今回は以上です。