CSSホバーエフェクト

テキストにカーソルを合わせるとテキストの下にラインが「ニュ～」っと出てくるホバーエフェクト素材を作りましたので掲載します。シンプルなサイトのナビゲーションなどに使えると思います。

【デモ】

デモの様な感じでテキストホバーすると下にラインが「ニュ～」っと出てきます。下にソースを掲載しています。

【HTML】

<div class="navi_wrapper">
  <ul>
    <li><a class="line_bottom bxp" href="index.html">HOME</a></li>
    <li><a class="line_bottom bxp" href="index.html">ABOUT</a></li>
    <li><a class="line_bottom bxp" href="index.html">NEWS</a></li>
    <li><a class="line_bottom bxp" href="index.html">ACCESS</a></li>
  </ul>
</div>

【CSS】

.navi_wrapper{
   width: 100%;
   margin: 100px auto;
   padding: 0;
}
.navi_wrapper ul{
   margin: 0;
   padding: 0;			
}
.navi_wrapper ul li{
   float: left;
   margin: 0 0 0 15px;
   list-style: none;
}
.navi_wrapper ul li a{
   padding: 15px 10px;
   font-size: 14px;
   color: #222;
}
.navi_wrapper ul li a:hover{
   color: #777;
}
.navi_wrapper ul li a,.navi_wrapper ul li a:visited,.navi_wrapper ul li a:hover,.navi_wrapper ul li a:active{
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  position:relative;
  transition:0.5s color ease;
  text-decoration:none;
  color:#222;
  font-size:14px;
}
.navi_wrapper ul li a:hover{
  color:#777;
}
.navi_wrapper ul li a.before:before,.navi_wrapper ul li a.bxp:after{
  content: "";
  transition:0.5s all ease;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  position:absolute;
}
.navi_wrapper ul li a.before:before{
  top:3px;
}
.navi_wrapper ul li a.bxp:after{
  bottom:3px;
}
.navi_wrapper ul li a.before:before,.navi_wrapper ul li a.bxp:after{
  height:2px;
  height:2px;
  width:0;
  background:#222;
}
.navi_wrapper ul li a.line_bottom:after,.navi_wrapper ul li a.sixth:before,.navi_wrapper ul li a.sixth:after{
  left:50%;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
}
.navi_wrapper ul li a.before:hover:before,.navi_wrapper ul li a.bxp:hover:after{
   width:100%;
}

参考サイト
http://goo.gl/reHoCw

まとめ

最近は、クライアント様が「シンプルで見易いサイトにして欲しい」と要望されることが増えています。上記の様なエフェクトは知っておくといざという時の引き出しが増えて良いですよね。コピーペーストでそのまま使えると思いますので役に立てて頂けると幸いです。