CSS3とHTML5だけで作成するボタンデザイン

author photo

Byinfobloger

ボタンデザイン

記事を書く時に意外に多く使用するのがボタンです。

ボタンも画像で作成するのが一般てきでしたが、今ではHTML5とCSS3だけで素敵なボタンを作成できるようになりました。

今回はデザインだけではなく、実用的なボタンを何種類か紹介していきます。

スポンサーリンク

シンプルな角丸デザインのボタン

見た目がシンプルなボタンほど、場所を選ばずに使えると思います。

最初に紹介するのは角丸ボタン。
ホバーアニメーションで読者にも楽しんでもらえそうですね。

シンプルな角丸ボタン

ボタンにオンマウスで背景が切り替わります。

基本のHTML
<a class="Round-btn01" href="#">お申し込み</a>
クラス指定で背景色が変わります
クラスに「btn-bgcolor-navy」を追加
クラス指定で文字サイズが変わります
クラスに中「FontSize-M」、大「FontSize-L」を追加
HTML
<p><a class="Round-btn01 btn-bgcolor-navy" href="<!-- URL -->"><!-- 文字列(サイズ通常) --></a></p>
<p><a class="Round-btn01 btn-bgcolor-navy FontSize-M" href="<!-- URL -->"><!-- 文字列(サイズM) --></a></p>
<p><a class="Round-btn01 btn-bgcolor-navy FontSize-L" href="<!-- URL -->"><!-- 文字列(サイズL) --></a></p>
角丸ボタンの背景色を変更

基本のHTML
<a class="Round-btn01" href="#">お申し込み</a>
①Orange
クラス指定「btn-bgcolor-orange」を書き加える
②Darkred
クラス指定「btn-bgcolor-darkred」を書き加える
③Salmon
クラス指定「btn-bgcolor-salmon」を書き加える
④Steelblue
クラス指定「btn-bgcolor-steelblue」を書き加える
⑤Navy
クラス指定「btn-bgcolor-navy」を書き加える
⑥Green
クラス指定「btn-bgcolor-green」を書き加える
⑦Teal
クラス指定「btn-bgcolor-teal」を書き加える
⑧Gray
クラス指定「btn-bgcolor-gray」を書き加える
⑨Black
クラス指定「btn-bgcolor-black」を書き加える

ミニマルの長方形のボタン

角丸ボタンの紹介をしましたが、今度はシンプルな長方形のボタンを紹介します。

基本のHTML
<a class="Square-btn01" href="#">お申し込み</a>
クラス指定で背景色が変わります
角丸ボタンと同じクラス指定で背景色が変わります
クラス指定で文字サイズが変わります
クラスに中「FontSize-M」、大「FontSize-L」を追加

クラス指定で背景色が変わるのは角丸ボタンと一緒です。

HTML
<p><a class="Square-btn01 btn-bgcolor-navy" href="<!-- URL -->"><!-- 文字列(サイズ通常) --></a></p>
<p><a class="Square-btn01 btn-bgcolor-navy FontSize-M" href="<!-- URL -->"><!-- 文字列(サイズM) --></a></p>
<p><a class="Square-btn01 btn-bgcolor-navy FontSize-L" href="<!-- URL -->"><!-- 文字列(サイズL) --></a></p>

ブロック要素全体にリンクを設定する方法

今までのボタンと違うのは、ブロック要素「div」などで囲まれた要素全体にリンクを設定します。

メリットとしては読者に行動をうながす「CTA」に優れている点です

入会金無料キャンペーン実施中

資料請求・お問い合わせはこちら

ブロック要素の「div」全体を「a」タグで囲んでリンクさせます。

この方法も以前は画像を使っていたのですが、CSS3で簡単に作成できるようになりました。

スマートフォンでボタンをタップする時に、小さすぎて上手くタップできない事がありますが、ブロック要素の場合はその心配もありません。

モバイルファーストを考えると、使用する機会も増えるのではないでしょうか。

HTML
<a href="<!-- URL -->" target="_blank">
<div class="Campaign">
<p class="Campaign-Title wf-sawarabimincho"><!-- 文字入力1 --></p>
<p class="Campaign-SubTitle wf-sawarabimincho"><!-- 文字入力2 --></p>
</div>
</a>

まとめ

記事を書いているとボタンを使う機会が多いと思います。

色々なボタンを用意しましたが、全てを使う必要はありません。

自分で決めた規則で使い分けると、読者も「このボタンはリンクだな」と理解してくれるようになります。

ちなみに全てのボタンはテンプレートに組み込み済みですのでクラス指定するだけで全て使うことができますのでご安心を。

以上、今回のテーマはこれで終了となります。

最後までお付き合いして頂き、ありがとうございました!

関連記事
Share

Comments 0

Leave a reply