Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
ボタンのアウトラインアニメーションでfocusを分りやすくします - CodingMania

2015/5/8

ボタンのアウトラインアニメーションで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;
}