CSS box-shadowのinsetを使って、要素をhoverした際、boxの内側にラインを描く多重ラインのエフェクトです。
次のサンプルボタンにhoverすると、背景のブルーの部分が白いふち付きで収縮したようになります。

サンプル

サンプルのhtmlソース

<div class="test-nav">
	<a href="#">サンプルボタン1</a>
	<a href="#">サンプルボタン2</a>
	<a href="#">サンプルボタン3</a>
	<a href="#">サンプルボタン4</a>
</div>

サンプルのCSSソース

.test-nav {
	width:820px;
	margin:0 auto;
	}
.test-nav a {
	display:inline-block;
 	width:190px;
	font-size:15px;
	text-align:center;
	padding:12px 0 11px 0;
	margin:0 0 0 4px;
	color:#26c;
	background-color:#6af;
	border:2px solid #fff;
	outline:1px solid #666;
	text-decoration:none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
	}
.test-nav a:hover {
	box-shadow: 0 0 0 1px #666,0 0 0 4px #88e inset,0 0 0 5px #fff inset;
	color:#000;
	}