<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;
}

投稿 ボタンのアウトラインアニメーションでfocusを分りやすくします は CodingMania に最初に表示されました。

<div class="mod_menulist">
<ul>
<li><a href="#"><span>Before selecting lighting</span></a></li>
<li><a href="#">Lighting basics</a></li>
<li><a href="#">The light required for each room</a></li>
<li><a href="#">The psychological impressions due to changes in light color(color temperature)</a></li>
<li><a href="#">Applying the impact of light</a></li>
<li><a href="#">The workings and differences of lights</a></li>
<li><a href="#">Types of light sources</a></li>
<li><a href="#">Features of principal light sources</a></li>
<li><a href="#">Styles of lights</a></li>
<li><a href="#">Types and features of principal lighting fixtures</a></li>
</ul>
<!-- / .mod_menulist --></div>

CSS

/* mod_menulist
-----------------------------------------*/
.mod_menulist{
 margin:0 20px 0 20px!important;
}
.mod_menulist ul{
}
.mod_menulist ul li{
 display:block;
 line-height:1.3!important;
}
.mod_menulist ul li a{
 display:table;
 width:100%;
 box-sizing:border-box;
 padding:12px 12px 5px 12px!important;
 -ms-transition:all 0.3s linear 0s;
 -moz-transition:all 0.3s linear 0s;
 -webkit-transition:all 0.3s linear 0s;
 transition:all 0.3s linear 0s;
 border-bottom:solid 1px #dfdfdf!important;
}
.mod_menulist ul li a:before{
 font-family: 'FontAwesome';
 content: "\f105";
 font-size:18px!important;
 color:#666666;
 font-weight:bold;
 display:table-cell;
 vertical-align:middle;
 line-height:1;
 width:15px;
 padding:0 14px 5px 12px!important;
}
.mod_menulist ul li a:hover{}
.mod_menulist ul li a:link    {color:#000; text-decoration:none!important;}
.mod_menulist ul li a:visited {color:#000; text-decoration:none!important;}
.mod_menulist ul li a:hover   {color:#00a0c6; background-color:#ebebeb; text-decoration:none!important; padding-left:18px!important;}
.mod_menulist ul li a:active  {color:#00a0c6; background-color:#ebebeb; text-decoration:none!important; padding-left:18px!important;}

投稿 マウスオーバーするとtransitionを使って右へ文字を寄せます は CodingMania に最初に表示されました。

<div class="mod_btn">
<p><a href="#">会社概要へ</a></p>
<!-- / .mod_btn --></div>

<div class="mod_btn">
<p><a href="#">トップページへ戻る</a></p>
<!-- / .mod_btn --></div>

<div class="mod_btn mod_btn-center">
<p><a href="#">文字が長くなったりセンター位置にしてみたり</a></p>
<!-- / .mod_btn --></div>

CSS

/* mod_btn
-----------------------------------------*/
.mod_btn{
 margin:10px 0 10px 0;
}
.mod_btn-center{
 text-align:center;
}
.mod_btn p{
 border:solid 1px #E73582;
 display:inline-block;
}
.mod_btn p a{
 display:block;
 padding:10px 10px 10px 10px;
 color:#E73582;
 font-size:13px;
 -ms-transition:all 0.3s ease 0s;
 -moz-transition:all 0.3s linear 0s;
 -webkit-transition:all 0.3s linear 0s;
 transition:all 0.3s linear 0s;
 border:solid 3px #FFF;
}
.mod_btn p a:after{
 font-family: 'FontAwesome';
 content: "\f101";
 display:inline-block;
 padding:0 0 0 10px;
}
.mod_btn p a:link    {color:#E73582; text-decoration:none;}
.mod_btn p a:visited {color:#E73582; text-decoration:none;}
.mod_btn p a:hover   {color:#E73582; text-decoration:none; border:solid 3px #E73582;}
.mod_btn p a:active  {color:#E73582; text-decoration:none; border:solid 3px #E73582;}

投稿 マウスオーバーするとtransitionを使ってborderを太くします は CodingMania に最初に表示されました。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="js/main.js"></script> 

[main.js]JavaScript

jQuery(document).ready(function($){
	var btn = $(".mod_btn .btnMenu");

//click
	$(btn).bind("click", "focus", function(event){
    if($(btn).hasClass("off")){
		$(btn).removeClass("off").addClass("on");
    }else{
		$(btn).removeClass("on").addClass("off");
   }
　});

});

HTMl

<div class="mod_btn">
<p class="btnMenu off"><a href="javascript:void(0)"><span>メニューを開く</span><i class="openicon fa fa-list-ul"></i><i class="closeicon fa fa-times"></i></a></p>
<!-- / .mod_btn --></div>

CSS

/* mod_btn
-----------------------------------------*/
.mod_btn p.btnMenu {
 position:relative;
 width:27px;
 height:27px;
 background-color:#006d86;
}
/* text hidden */
.mod_btn .btnMenu span{
 display:block;
 width:1px;
 height:1px;
 overflow:hidden;
}
.mod_btn .btnMenu a{
 display:block;
 color:#FFF!important;
}
.mod_btn .btnMenu.on a{
 background-color:#005467;
}
.mod_btn .btnMenu i{
 position:absolute;
 top:3px;
 left:3px;
 font-size:150%;
}
.mod_btn .btnMenu.on i{
 top:3px;
 left:6px;
}
/* off closeicon 非表示 */
.mod_btn .btnMenu.off i.closeicon{
 opacity:0;
 -webkit-transform: rotate(-90deg);
 transform: rotate(-90deg);
}
.mod_btn .btnMenu.on i.closeicon{
 opacity:1;
 -ms-transition-property:opacity,-ms-transform;
 -ms-transition-duration:1s;
 -moz-transition-property:opacity,-moz-transform;
 -moz-transition-duration:1s;
 -webkit-transition-property:opacity,-webkit-transform;
 -webkit-transition-duration:1s;
 transition-property:opacity,transform;
 transition-duration:1s;
}
/* on openicon 非表示 */

.mod_btn .btnMenu.off i.openicon{
 opacity:1;
 -ms-transition-property:opacity,-ms-transform;
 -ms-transition-duration:1s;
 -moz-transition-property:opacity,-moz-transform;
 -moz-transition-duration:1s;
 -webkit-transition-property:opacity,-webkit-transform;
 -webkit-transition-duration:1s;
 transition-property:opacity,transform;
 transition-duration:1s;
}
.mod_btn .btnMenu.on i.openicon{
 opacity:0;
 -webkit-transform: rotate(90deg);
 transform: rotate(90deg);
}

投稿 CSSのアニメーションで画像を回転・切替します。 は CodingMania に最初に表示されました。