Result
box-shadowを応用したボタンのホバーエフェクトです。
css
span {/*ボタンの基本設定*/ cursor: pointer; clear: both; border-radius: 3px; padding: 20px 60px; display: inline-block; margin: 0 20px; transition: all 0.8s, color 0.3s 0.3s; cursor: pointer; background: #9acc5f; color: #333; } a:hover, span:hover { color: #fff; } /* box-shadowのinset;で内側に影を、ホバー時に表示する。*/ /*1*/ .btn-left:hover { box-shadow: 300px 0 0 0 rgba(0, 0, 0, 0.5) inset; } /*2*/ .btn-right:hover { box-shadow: -300px 0 0 0 rgba(0, 0, 0, 0.5) inset; } /*3*/ .btn-top:hover { box-shadow: 0 150px 0 0 rgba(0, 0, 0, 0.5) inset; } /*4*/ .btn-bottom:hover { box-shadow: 0 -150px 0 0 rgba(0, 0, 0, 0.5) inset; } /*5*/ .btn-special3:hover { box-shadow: 300px 0 0 0 rgba(0, 0, 0, 0.25) inset, -300px 0 0 0 rgba(0, 0, 0, 0.25) inset; } /*6*/ .btn-special4:hover { box-shadow: 0 80px 0 0 rgba(0, 0, 0, 0.25) inset, 0 -80px 0 0 rgba(0, 0, 0, 0.25) inset; } /*7*/ .btn-special1:hover { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.5) inset; } /*8*/ .btn-special2:hover { box-shadow: 0 0 0 10px #9acc5f inset, 0 0 0 150px rgba(0, 0, 0, 0.5) inset; }
html
<span class="btn-right">1</span> <span class="btn-left">2</span> <span class="btn-top">3</span> <span class="btn-bottom">4</span> <span class="btn-special3">5</span> <span class="btn-special4">6</span> <span class="btn-special1">7</span> <span class="btn-special2">8</span>