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コーディング

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

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

  3. HTMLコーディング

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

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

  4. HTMLコーディング

    EC-CUBE3で自動返信メールが文字化けし、そしてタイトルが途中で切れたときの対処法

    大阪はすっきりしない天気が続いてロードバイクに乗れずテンション下がりまくりのともさんですこんにちは。さて、前回に引き続き今回もEC-CUBE関…

  5. HTMLコーディング

    社内勉強会を行いました。

    こんにちわ、入社2ヶ月のともさんです。さて、去る9月16日(金)19:00~社内勉強会を行いました。テイクフォーでは初の勉強会となります。…

  6. HTMLコーディング

    tableをCSSのみでレスポンシブ対応にする方法

    テイクフォーにジョインして早3ヶ月が経ちましたがあきらか飲む回数が増えてるともさんですこんにちは。・・・前はそんな、毎週飲むとか、なかったンデスヨ…

コメント

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

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

CAPTCHA


最近の記事

  1. ガジェット

    USB充電器を買ったのでレビュー(その1)
  2. ガジェット

    オススメのモバイルバッテリーを紹介します
  3. レポート

    水彩画の描き方を教えます!(その1)
  4. HTMLコーディング

    【WordPressでGO!】WordPressの子テーマを作ってみよう
  5. WEB集客

    Googleアナリティクスで目標設定とABテストをしてみよう
PAGE TOP