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

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

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

  2. HTMLコーディング

    【SVGことはじめ その1】SVG形式の画像ファイルを作って表示させてみよう

    このあいだ社長の大好きなラフロイグというウイスキーを飲ませてもらい独特の匂いに驚きのけぞったともさんです、こんにちは。みなさん、svgって知っ…

  3. HTMLコーディング

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

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

  4. HTMLコーディング

    【PHP】ページ毎に表示を変えるサイドメニューの分岐の方法

    先日会社の人たちと初登山へ行ってきましたが3回ほど盛大にコケてオシリが痛くなったともさんです、こんにちわ。・・・いや、登山楽しかったですよ。次回は…

  5. HTMLコーディング

    最近流行りの静的サイトジェネレータについて掘り下げてみる【Movable Type編】

    最近、耳をふさがないイヤホンを見つけて衝動買いしてしまったワタクシ、ともさんです。こんにちわ。Bluetoothではないのに、まあまあ高め…

  6. HTMLコーディング

    高機能で簡単!レスポンシブ対応のjQueryスライダー「bxSlider」を設置してみよう

    もう年の瀬ですね。当社の営業日も実質今日で終わりです。あとは大掃除を残すのみ(/・ω・)/そんな中でのこんなブログ記事です。仕事熱…

コメント

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

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

CAPTCHA


最近の記事

  1. HTMLコーディング

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

    USB充電器を買ったのでレビュー(その1)
  3. コピーライティング

    コピーライティング心理学 そのに ~スノッブ効果~
  4. HTMLコーディング

    【WordPressでGO!】WordPressをローカル環境へインストールして…
  5. お知らせ

    【2018年】新年あけましておめでとうございます
PAGE TOP