jQuery 버튼 효과

jQuery 버튼 효과 

j_01.zip

1. 롤오버 버튼

2. 오버시 라인이 생성

3. 좌측에서 우측으로 색상변경

   <section>
      <article id="btn">
         <h2>버튼</h2>
         <div class="inner">
            /* 첫번째 버튼 */
             <button>button1</button>
             <button>button2</button>
             <button>button3</button>
             <button>button4</button>
             /* 두번째 버튼 */
             <button>button5</button>
             <button>button6</button>
             <button>button7</button>
             <button>button8</button>
             /* 세번째 버튼 */
             <button>button9
                 <span class="bg"><span>TEXT</span></span>
             </button>
             <button>button10
                 <span class="bg"><span>TEXT</span></span>
             </button>
             <button>button11
                 <span class="bg"><span>TEXT</span></span>
             </button>
             <button>button12
                 <span class="bg"><span>TEXT</span></span>
             </button>
         </div>         
      </article>
   </section>

#btn button {
    position:relative;
    display: block; 
    float:left; 
    width:225px; height:80px;
    margin:0 10px 20px; 
    padding:0; 
    font-size:16px; 
    letter-spacing:0.15em; 
    color:#edc000; 
    background:#fff; 
    cursor: pointer; 
    border:solid 0px #ebc000;
    border-radius:20px;
}
#btn button .bg {
    position: absolute;
    left:0; top:0;
    width:0; height:100%;
    overflow: hidden;
}
#btn button .bg span {
    display:block;
    width:225px; height:80px;
    color: #fff;
    background: #ad5e9b;
    border-radius:20px ;
    line-height: 80px;
}

$(function(){
    var speed = 1000; //변수 선언 
    // 첫번째 버튼 
    $('#btn button:nth-child(-n+4)').on('mouseover', function(){
        $(this).stop().animate({
            backgroundColor : '#ae5d9b',
            color : '#fff'
        },speed,'easeInExpo');
    }).on('mouseout',function(){
        $(this).stop().animate({
            backgroundColor : '#fff',
            color : '#ebc000'
        },speed,'easeInBounce');        
    });
    // 두번째 버튼
    $('#btn button:nth-child(n+5):nth-child(-n+8)').on('mouseover',function(){
        $(this).stop().animate({
            borderWidth : '12px',
            color : '#ad5e9b'
        },speed*0.4);
    }).on('mouseout',function(){
        $(this).stop().animate({
            borderWidth : '0px',
            color : '#abc000'
        },speed*0.4);    
    });
    // 세번째 버튼 
    $('#btn button:nth-child(n+9):nth-child(-n+12)').on('mouseover', function(){
        $(this).find('.bg').stop().animate({
            width:'100%'
        },speed,'easeInBounce');
    }).on('mouseout',function(){
        $(this).find('.bg').stop().animate({            
            width:'0%'
        },speed*0.4,'easeOutBounce' );    
    });
});