CSSだけでAmazonダッシュボタン風のLED点滅を行う

仮想のAmazonダッシュボタン的なWEBアプリを作っている過程で、CSSだけでAmazon Dashボタン風のLED点滅ができたので共有。

サンプル

こんな感じで使っています。

CSS

ledblink.css

 span.ledblink {
	display: block;
	width: 8px;
	height: 8px;
	background-color: rgb(180,180,180);
	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5), 0px 0px 3px 2px rgba(100,100,100,0.5);
 	border-radius: 4px;
}
span.ledblink.on {
	background-color: rgb(255,255,255);
	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5), 0px 0px 3px 2px rgba(187,187,187,0.5);
	animation: blinkWhite 0.9s infinite;
}
@keyframes blinkWhite {
    from { 
      background-color: rgb(180,180,180); 
      box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),	0px 0px 3px 2px rgba(100,100,100,0.5);
    }
    50%  { 
      background-color: rgb(255,255,255);
      box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),	0px 0px 3px 2px rgba(187,187,187,0.5);
    }
    to   { 
      background-color: rgb(180,180,180);
      box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),	0px 0px 3px 2px rgba(100,100,100,0.5);
    }
}

使い方

消灯

sample-off.html

<span class="ledblink"></span>

onクラスを付けると点滅開始

sample-on.html

<span class="ledblink on"></span>