<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; /* 애니메이션 천천히 */
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.