CSS3アニメーションボタン「Radioactive Buttons」

Radioactive Buttons
css3-animation

CSS3でアニメーションを使ったボタン。
Webkitブラウザ(Safari、Google chromeなど)でみると、ぼわ~っと光ってきます。
FireFox3.6やIE8では、このボタンの効果は表現されません。

作り方は以下ZURBのPlaygroudの通り。

@-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;
  }


  1. コメントはまだありません。

  1. トラックバックはまだありません。