CSS

【CSS】CSS3リンクホバー効果-CSS3 Hover Link Effects

March 23, 2015

CSS3のリンクホバー効果。CSS3 Hover Link Effects

DEMO1を参考

HTML

<nav>
      <a href="demo1.html" class="box demo-1"> <i class="fa fa-hand-o-right"></i> <span>Demo 1</span> </a>
      <a href="demo2.html" class="box demo-1"> <i class="fa fa-hand-o-up"></i> <span>Demo 2</span></a>
      <a href="demo3.html" class="box demo-1"> <i class="fa fa-hand-o-left"></i>  </i> <span>Demo 3</span></a>
      <a href="demo4.html" class="box demo-1">  <i class="fa fa-thumbs-o-up"></i> <span>Demo 4</span></a>
</nav>

CSS

.box{
  color: #fff;
  padding: 10px;
}
 
.box:hover{
  background: #fff;
  color: #26425E;
}
 
.demo-1 {
  position: relative;
}
 
.demo-1:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
 
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.2s;
 
  -webkit-transition-property: top, left, right, bottom;
  -moz-transition-property: top, left, right, bottom;
  -ms-transition-property: top, left, right, bottom;
  -o-transition-property: top, left, right, bottom;
  transition-property: top, left, right, bottom;
}
 
.demo-1:hover:before, .demo-1:focus:before{
  -webkit-transition-delay: .1s;
  -moz-transition-delay: .1s;
  -ms-transition-delay: .1s;
  -o-transition-delay: .1s;
  transition-delay: .1s; 
 
  border: #fff solid 3px;
  bottom: -7px;
  left: -7px;
  top: -7px;
  right: -7px;
}

・DEMO1-マウスを合わせると、3ピクセルの境界がリンクテキストのボックスコンテナの背面から出てくる効果。
・DEMO2-マウスを合わせると、スムーズハイライト効果。テキストをハイライト表示し、テキストの上下に破線の境界線を追加します。
・DEMO3-マウスを合わせると、3Dボックスフリップ効果。
・DEMO4-CSS3境界線@keyframesアニメーション。

Demo/Download