<div>
  <button class="animation">
    마우스를 올려보세요.
  </button>
</div>
/* 초기 설정 코드 */
*{
  margin:0;
  padding:0;
}
button{
  border:0;
  background:0;
}

/* 중앙정렬 */
div{
  display:flex;
  flex-direction: column; /* 위에서 아래로 정렬 (열) */
  justify-content: center; /*세로방향 가운데 정렬*/
  align-items: center; /*가로방향 가운데 정렬*/
  height:100vh;
}

/* button css */
.animation{
  background:#90C8AC;
  color:#333;
  padding:12px 20px;
  font-size:16px;
  font-weight:bold;
}

.animation:hover{
  opacity:0.5; /* 투명도 조절 */
  cursor:pointer; /* 마우스 올렸을 때 손모양 마우스 */
  
  transition: all 0.5s ease-out; /* 애니메이션 천천히 */ 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.