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

    cssでグラデーションを描いてみよう

    年末に向けていろいろと身辺周りが慌ただしくなってきましたね。こんにちは、ともさんです( ^ω^ )グラデーションをcssで描けることはもう…

  2. HTMLコーディング

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

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

  3. HTMLコーディング

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

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

  4. HTMLコーディング

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

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

  5. HTMLコーディング

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

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

  6. HTMLコーディング

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

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

コメント

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

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

CAPTCHA


最近の記事

  1. お知らせ

    2016年もWEBデザイナーを募集しています。
  2. HTMLコーディング

    EC-CUBE3で自動返信メールが文字化けし、そしてタイトルが途中で切れたときの…
  3. Yahoo!タグマネージャーを導入してみよう

    WEB集客

    Yahoo!タグマネージャーを導入してみよう
  4. レポート

    HARIO V60がきた!
  5. HTMLコーディング

    EC-CUBE3でテンプレート適用後にパスが通らなくなってしまったときの対処法
PAGE TOP