WEBデザイン

【コピペ】HTMLとCSSで「立体風のボタン」を実装する簡単な方法!

CSS3D

どうも、あいまる(@affi_maru)です。

今回は、CSSだけで立体風のボタンを作る方法を紹介します。

とはいうものの、グラデーションで設定するという簡単な方法です。

今回は『お問い合わせ』のテキストを例に作成していきます。

[box class=”box29″ title=”サンプル”]

お問い合わせ

[/box]

HTMLの設定

まず。ソースとなるHTMLです。

[codebox title=”HTML”]

<section id="side_contact">
          <p><a href="#" class="contact_button">お問い合わせ</a></p>
</section>

[/codebox]

ここではわかりやすくするために無駄なコードは打たないようにしています。

グラデーションを設定

次にグラデーションを設定します。

[codebox title=”CSS”]

#side_contact .contact_button {
     display: inline-block;
     background: #f1ede4;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f1ede4));
     background: -webkit-linear-gradeient(top, #ffffff 0%,#f1ede4 100%);
     background: linear-gradient(to bottom, #ffffff 0%,#f1ede4 100%);
}

[/codebox]

[memo title=”MEMO”]『-webkit-』とは、Google Chrome、Safari向けのベンダープレフィックスです。[/memo]

displayプロパティでインラインブロックにすることで、インラインの配置で幅と高さを指定できる状態にします。

displayについては下記の記事で理解を深めてください。

[sanko href=”https://saruwakakun.com/html-css/basic/display” title=”【CSS】displayの使い方を総まとめ!inlineやblockの違いは?” site=”サルワカ”]

角丸、ボーダーを設定

ボタンっぽく見えるように、余白を調整し、ボーダーと角丸を設定します。

[codebox title=”CSS”]

#side_contact .contact_button {
     display: inline-block;
     background: #f1ede4;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f1ede4));
     background: -webkit-linear-gradeient(top, #ffffff 0%,#f1ede4 100%);
     background: linear-gradient(to bottom, #ffffff 0%,#f1ede4 100%);
     color: #b7a077;
     padding: 10px;
     border: 1px solid #b7a077;
     border-radius: 5px;
     text-decoration: none;
}

[/codebox]

このCSSで、文字色、内側余白、線、角の丸み、リンクのアンダーラインの無効化を設定しました。

この状態で、グラーデーションボタンの完成です。

マウスオーバー時にデザインを変更

ボタンの上にマウスポインターを乗せた時の表示を変更するように設定します。

[codebox title=”CSS”]

#side_contact .contact_button:hover{
      background: #b7a077;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7a077), color-stop(100%,#e2cda7));
      background: -webkit-linear-gradient(top, #b7a077 0%,#e2cda7 100%);
      background: linear-gradient(to bottom, #b7a077 0%,#e2cda7 100%);
      color: #fff;
}

[/codebox]

『contact_button』に『:hover』の擬似クラスを指定し、ホバー時に同じようにグラデーションをかけます。

色は反転している補色関係だと視覚的にインパクトを与えることができます。

簡単なことからスタート!

どうでしたか?うまく実装できたでしょうか?色はあなたの自由にカスタマイズしてください。

グラデーションを設定する上で、自動でCSSのコードを生成してくれる便利なWEBツールがあるので活用してみてください。

[sanko href=”http://www.colorzilla.com/gradient-editor/” title=”” site=”Ultimate CSS Gradient Generator”]

他にもクオリティの高い立体ボタンを実装する方法はたくさんありますが、まずは簡単なところから理解を深めていきましょう!

 

最後まで読んでくださって、ありがとうございました。

ABOUT ME
たぬきちまん。
Webデザインの専門学生。「何にも縛られない自由な暮らし」を求め、アフィリエイトやWEBデザイン、マインドについての情報を発信。