はじめまして、制作チームキャップの徳永です。
今年でテイクフォーも４期目に突入し、そろそろ自社サイトでまじめに記事を書いていみようという事になったので僕はコーディング関係の記事を配信していく事になりました。
普段は個人ブログ「WAVE」というサイトでデザイン・コーディングやらマーケティング関連の記事を書いてます。先月出来たばかりのサイトなのでまだまだ記事数は少ないですが、Web業界で役に立つ記事をどんどん書いていきます。
まぁ、ぶっちゃけ
テイクフォーじゃなくて、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では１まとめにして書いてますが、それぞれの役目は下図のとおりです。
個別で書きたい場合は下記を参考にしてください。
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>
アイコンを１つ加えただけでさらに見た目がボタンっぽくなりました。
他にもカラーを変えてアイコンも追加すればこんなボタンも出来ちゃいます。
こんな感じでね
皆さんも是非この技法を使っていい感じのサイトを作ってみてください。
それでは！
PS:社長にこっそりお願いした結果WAVEのリンク設置許可がおりたので、
興味のある方は是非一度お越しください。
この記事へのコメントはありません。