css 자주쓰는 마우스오버 이벤트 mouse over hover

마우스오버 이벤트

 
 
평상시 작업할때 자주 쓰는 버튼 마우스 오버 css 스타일입니다.
전체 html은 간단히 이렇게 작업했습니다.

<div class="wrap">
  <h2>버튼디자인</h2>
  <p><div class="btn btn1">버튼타입1</div></p>
  <p><div class="btn btn2">
    <div class="txt">버튼타입2</div>
  </div></p>
  <p><div class="btn btn3">버튼타입3</div></p>
</div>

 
 
버튼 1번은 간단히 배경색이 바뀌는 css입니다.
transtion은 background를 넣었습니다

.btn1{
  position:relative;
  display:inline-block;
  background:rgb(26, 115, 232);
  padding:10px 20px;
  color:#fff;
  cursor:pointer;
  transition:background .4s;
}
.btn1:hover{
  background:#5AAEFF;
}

 
 
버튼 2번은 마우스 오버시에 progress bar스타일로 게이지바가 채워지듯이
배경색이 변경됩니다.

.btn2{
  position:relative;
  display:inline-block;
  background:rgb(26, 115, 232);
  padding:10px 20px;
  color:#fff;
  overflow:hidden;
  cursor:pointer;
}
.btn2 .txt{
  position:relative;
  z-index:1;
}
.btn2::after{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  transform:translateX(-100%);
  background:#5AAEFF;
  transition:transform .5s;
  content:"";
}
.btn2:hover::after{
  left:0;
  transform:translateX(0);
}

 
 
버튼 3번은 마우스오버할때 포인트로 들어간 공이
버튼 전체에 늘어나면서 채워지게 표현했습니다.

.btn3{
  display:inline-block;
  position:relative;
  padding:10px 25px;
  font-weight:600;
  cursor:pointer;
} 
.btn3::after{
  position:absolute;
  width:40px;
  height:100%;
  top:0;
  left:0;
  background:#EAEAEA;
  border-radius:30px;
  content:"";
  z-index:-1;
  transition:width .4s;
}

.btn3:hover::after{
  width:100%;
}