[CSS] ボタンactiveのとき、実際に押し込まれたようなエフェクトです。サンプルの7つのボタンはすべて同じエフェクトです。ボタンactiveの際、「 transform: translate(0,2px) 」を使って、ボタンをY方向のみ2px移動、同時にbottomに指定していた2pxの濃い色のborderを消すことで、ボタンが押し込まれた状態を表現しています。このエフェクトが付くことで、ボタンクリックが明確になります。ボタンの状態はマウスアウトすると元に戻ります。

 

 

サンプルのhtmlソース

  <div id="content" style="padding:15px;background:#ddd;">
        <div class='red button'>RED</div>
        <div class='green button'>GREEN</div>
        <div class='blue button'>BLUE</div>
        <div class='yellow button'>YELLOW</div>
        <div class='purple button'>PURPLE</div>
        <div class='dark button'>DARK</div>
        <div class='light button'>LIGHT</div>
  </div>

 

サンプルのCSSソース

#content div {
	display:inline-block;
	margin-right:15px;
	position:relative;
	left:8px;
	}
div.button {
	height:30px;
	line-height:30px;
	width:90px;
	text-align:center;
	cursor:pointer;
	border-top:2px solid rgba(255,255,255,0.2);
	border-bottom:2px solid rgba(0,0,0,0.2);
	border-radius:4px;
	}
div.button:hover {
	opacity:0.8;
	}
div.button:active {
	-webkit-transform: translate(0,2px);
	-moz-transform: translate(0,2px);
	transform: translate(0,2px);
	border-bottom:none;
	}