マウスをフォーカスすると、アニメーションで色が少しずつ変化するボタンを作成するPhotoshopとHTML/CSSとJavaScriptの三つのチュートリアルをSix Revisionsから紹介します。
Create an Animated "Call to Action" Button
demo
チュートリアルは三部構成で、Photoshop編、HTML/CSS編、JavaScript編となっており、デモページではアニメーション有り版（JavaScript）、無し版（HTML/CSS）があります。
ボタンはCSSスプライトで実装されており、画像の作成もそれ用になっています。
Photoshopでの完成画面
HTML/CSSはシンプルなものとなっており、JavaScriptはjQueryを使用して透過のアニメーションを実装しています。
Post on:2009年12月10日
