[CSS]CSSスプライトにアニメーションを加えた繊細で美しいボタン

サイト構築 -CSS

Post on:2010年10月6日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

泡を配置した画像を使用して、CSS3で美しいアニメーションを適用したボタンを作成するチュートリアルを紹介します。

CSS3 Animated Bubble Buttons
デモページ

[ad#ad-2]

デモのアニメーションを楽しむにはWebkit系ブラウザ（Chrome, Safari）でご覧ください。
CSS3アニメーション非対応ブラウザ（Firefox3.6など）でもそれなりに美しく表示されます。

Firefox3.6でのキャプチャ

アニメーションに使用している画像は透過PNGのため、ボタンのベースカラーはCSSのカラー指定でおこなえます。

泡の画像
※上記は分かりやすいように、地をブラックにしています。

[ad#ad-2]

CSS

背景画像の指定とアニメーションは下記のようになります。

.button{
	background-repeat:no-repeat;

	background-position:bottom left;
	background-image:url('button_bg.png');

	background-position:bottom left, top right, 0 0, 0 0;
	background-clip:border-box;

	-webkit-transition:background-position 1s;
	-moz-transition:background-position 1s;
	transition:background-position 1s;
}
.button:hover{
	background-position:top left;
	background-position:top left, bottom right, 0 0, 0 0;
}