hover效果

hover以后，边框向2边展开

by yu lemon

HTML

<div class="main">
	    <div class="button">
	        <span class="text">hover</span>
	        <span class="border"></span>
	    </div>
	</div>

CSS

* {
 	margin: 0px;
 	padding: 0px;
 }
 .button {
       position: relative;
       width: 150px;
       height: 50px;
       line-height: 50px;
       text-align: center;
   }
   .button .border {
       display: inline-block;
       border-top: 1px solid #fff;
       border-bottom:1px solid #fff;
   }
   .button .check {
       position: absolute;
       top: 0;
       left: 50%;
       margin-left: -50%;
       width: 50%;
       height: 100%;
       border-top: 1px solid red;
       border-bottom: 1px solid red;
       transform-origin: 0;
       transform: scaleX(2);
       transition: 0.3S ease-in-out
   }
   .button:hover .text {
   	letter-spacing: 3px;
   }

JavaScript

$(document).ready(function() {
  $(".button").hover(function () {
          $(this).find(".border").addClass("check")
      },function () {
          $(this).find(".border").removeClass("check")
      })
});