HTMLコーディング

css3だけで立体的でアニメーション付きのボタンを作ろう

はじめまして、制作チームキャップの徳永です。
今年でテイクフォーも4期目に突入し、そろそろ自社サイトでまじめに記事を書いていみようという事になったので僕はコーディング関係の記事を配信していく事になりました。

普段は個人ブログ「WAVE」というサイトでデザイン・コーディングやらマーケティング関連の記事を書いてます。先月出来たばかりのサイトなのでまだまだ記事数は少ないですが、Web業界で役に立つ記事をどんどん書いていきます。

まぁ、ぶっちゃけ
テイクフォーじゃなくて、WAVEの記事を読んで欲しいです。

なんとなく、読むならテイクフォーよりWAVEの方がいいんじゃね?と思ったからであって別にアクセスアップを目的にしてる訳じゃないすよ。いやホントに。

というわけで、みなさん是非WAVEに起こしください。

テイクフォーの事は忘れてWAVEの記事を読む

こんな事してたら社長の田邊に大切なWAVEを潰されかねないので、ちゃんと記事を書きます。
さて、いま上のボタンをクリックして頂いた方もいるかと思いますが、実はこのボタン動きを含めて全てcssだけで作っています。

まず最初にhtmlファイルに以下の内容を用意します。



<a href="#">Let's Click!!</a>

そしてここからが本番です。
css3を使って立体にしてホバー時の動きを付けていきましょう。

まずはボタンを立体的にする為、下記cssを書きます。

#btn {
width: 300px;
margin: 0 auto;
}

#btn a {
display: block;
padding:10px;
color:#fff;
text-align: center;
font-size:26px;
/*角を丸くする*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
/*下部にシャドウを付ける*/
-webkit-box-shadow: 0px 6px 0px #209b54;
-moz-box-shadow: 0px 6px 0px #209b54;
box-shadow: 0px 6px 0px #209b54;
background:#2ECC71;
}

これで立体になりボタンっぽい見た目になりましたが、見た目だけで、まだ動きが付いていない状態です。
ここから動きを付けるcssの紹介と解説します。まず、先ほど書いたaタグにcssを追加します。

#btn a {
display: block;
padding:10px;
color:#fff;
text-align: center;
font-size:26px;
/*角を丸くする*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
/*下部にシャドウを付ける*/
-webkit-box-shadow: 0px 6px 0px #209b54;
-moz-box-shadow: 0px 6px 0px #209b54;
box-shadow: 0px 6px 0px #209b54;
background:#2ECC71;

/*下記を追加*/
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}

この「transition」というcssはアニメーション機能を付けることが出来るコードです。
上記cssでは1まとめにして書いてますが、それぞれの役目は下図のとおりです。

cfyvguhbinjokmlvad

個別で書きたい場合は下記を参考にしてください。

transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;

次にhover時にシャドウの高さを短くし「transform 」を使ってボタンの位置を3px下に下げるようアニメーションを設定しています。コードは以下のように

/*ホバー時のアクション*/
#btn a:hover{
-webkit-box-shadow: 0px 2px 0px #209b54;
-moz-box-shadow: 0px 2px 0px #209b54;
box-shadow: 0px 2px 0px #209b54;
-webkit-transform: translate(0, 3px);
-moz-transform: translate(0, 3px);
transform: translate(0, 3px);
}

そして最後にボタンを押したと認識できるよう:activeにシャドウと同じ色を背景に付けましょう。

#btn a:active {
background:#209b54;
}

これで動きのある立体的なボタンの完成です。
しかし、ここでさらに一手間加えることによって更に見栄えの良いボタンができます。

WebフォントのFont Awesomeを使ってボタン内に簡単な装飾を付けてみましょう。

Font Awesomeの詳しい使い方は、こちらの記事をご覧ください。

便利すぎるWebフォント「Font Awesome」でサイトの見栄えをワンランクUP!


<header>
/*ヘッダー内に下記jsを追記*/
<script src="https://use.fontawesome.com/a04d9252da.js"></script><!-- FontAwesome CDN -->
</header>




<a href="#"><i class="fa fa-download" aria-hidden="true"></i> Let's Click!!</a>

アイコンを1つ加えただけでさらに見た目がボタンっぽくなりました。
他にもカラーを変えてアイコンも追加すればこんなボタンも出来ちゃいます。

こんな感じでね

皆さんも是非この技法を使っていい感じのサイトを作ってみてください。

それでは!

PS:社長にこっそりお願いした結果WAVEのリンク設置許可がおりたので、
興味のある方は是非一度お越しください。

WAVE DESIGNのサイトを見に行く

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. HTMLコーディング

    EC-CUBE3をローカル環境へインストールしてみよう

    寒い!((((;゚Д゚))))寒すぎてロードバイク諦めかけてるともさんです、こんにちわ。EC-CUBE3のテスト環境を作りたくて、どこに作…

  2. HTMLコーディング

    ホームページもインスタ映えの時代!?classを付けるだけで画像をインスタグラム風にできるcss

    こんにちは、ほぼ毎日朝7時からジムに通ってます。徳永です。今更ながらあけましておめでとうございます。作業がひと段落したので重い腰を上げて201…

  3. HTMLコーディング

    【WordPressでGO!】WordPressの子テーマを作ってみよう

    前回の記事から1週間も経っていないことに軽く衝撃を感じているともさんです、こんにちわ。もう正月気分も抜けて、いよいよ体重が気になりだしたころでしょ…

  4. HTMLコーディング

    【WordPressでGO!】管理画面の左メニューをカスタマイズしてみよう

    皆様あけおめです。ともさんです。あけおめ・・・もう2月ですよ。どうしましょう。なにをしてたんでしょうか。というわけで、今回もはりきってゴー…

  5. HTMLコーディング

    とっても簡単なベーシック認証(Basic認証)のかけ方

    日本酒のひやおろしがおいしい季節になりました、お久しぶりですこんにちわ。ともさんです。久しぶりに業務でベーシック認証(Basic認証)をか…

  6. HTMLコーディング

    便利すぎるWebフォント「Font Awesome」でサイトの見栄えをワンランクUP!

    今回はWebフォント「Font Awesome」の使い方を紹介します。Font Awesomeとは、Web上でアイコンをフォントとして利用できるW…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. お知らせ

    【2018年】新年あけましておめでとうございます
  2. WEBデザイン

    投稿記事を複製しよう!Duplicate Postの使い方
  3. HTMLコーディング

    高機能で簡単!レスポンシブ対応のjQueryスライダー「bxSlider」を設置…
  4. レポート

    HARIO V60がきた!
  5. Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    WEBデザイン

    Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法
PAGE TOP