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>