[CSS]CSSアニメーションを使用したポップでキュートなボタン

現在Safariのみに実装されているCSSアニメーションを使用して実装するボタンを紹介します。

Radioactive Buttons
demo

上記デモはSafariでご覧ください。ボタンのグラデーションがまぶしいくらいにアニメーションします。

Firefoxなどのアニメーションに対応していないブラウザでは下記のように表示されます。
個人的にはデザインはこれで充分のような気もします。

Firefoxでのキャプチャ

アニメーションのスタイルシートは下記のようになります。

@-webkit-keyframes greenPulse {
	from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
	50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; }
	to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
}

a.green.button {
	-webkit-animation-name: greenPulse;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
}

Post on:2009年12月9日