ボタンのアウトラインアニメーションでfocusを分りやすくします

フォーカスがあたるとtransitionをボタンのアウトラインをアニメーションします。

タブ移動でリンクをたどる場合、focusがあたった外れたを分りやすくします。

HTMl

<button class="btn" type="button">保存</button>

CSS

/* .btn
-----------------------------------------*/
.btn{
 background-color:#003567;
 color:#FFF;
 cursor:pointer;
 border:none;
 line-height:50px;
 text-align:center;
 width:100px;
 height:50px;
 	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
 	/*box-shadow*/
	-webkit-box-shadow:0px 2px 0px #000;
	-moz-box-shadow:0px 2px 0px #000;
	box-shadow:0px 2px 0px #000;
 outline:2px solid transparent;
 outline-offset:50px;
 transition:0.5s all ease;
}
.btn:focus{
 outline:1px dotted #003567;
 outline-offset:0;
}
.btn:active{
 position:relative;
 top:2px;
 	/*box-shadow*/
	-webkit-box-shadow:0px 0px 0px #000;
	-moz-box-shadow:0px 0px 0px #000;
	box-shadow:0px 0px 0px #000;
}