マウスオーバーするとtransitionを使ってborderを太くします

四角のリンクボタンにマウスオーバーすると枠線を太くアニメーションします。

枠線だけじゃなくて、背景色を変更したりできます。

HTMl

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