box-shadowを利用したボタンのホバーエフェクト集

Result

See the Pen <a href='https://codepen.io/kachibito/pen/VyPXyw/'>Hover buttons using box-shadow inset</a> by kachibito (<a href='https://codepen.io/kachibito'>@kachibito</a>) on <a href='https://codepen.io'>CodePen</a>.<br />
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>

via

Hover buttons using box-shadow inset

Result

css

html

via

Resources & Tools

OSS

AI

CSS snippet

JavaScript snippet

WordPress Code