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

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

デモのキャプチャ

CSS3 Animated Bubble Buttons
デモページ

[ad#ad-2]

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

デモのキャプチャ

Firefox3.6でのキャプチャ

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

のキャプチャ

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

[ad#ad-2]

CSS

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

ボタンのスタイルシートにはボックスシャドウ、角丸、テキストシャドウなども使用されており、CSS3アニメーションで美しいアニメーションを適用しています。

アニメーションはいろいろな画像で楽しめそうです。泡を小から大にしても綺麗かな、と思いました。

sponsors

top of page

©2018 coliss