728x90
CSS 애니메이션을 활용하여 <a> 태그로 만든 버튼에 다양한 애니메이션 효과를 추가할 수 있습니다. 아래는 버튼에 마우스를 올렸을 때 색상이 변하고, 크기가 살짝 커지는 애니메이션 효과를 적용한 예제입니다.
<div class="container">
<a href="#" class="animated-button">Hover Me!</a>
</div>.container {
text-align: center;
}
/* 애니메이션 버튼 스타일 */
.animated-button {
background-color: #4CAF50; /* 기본 배경색 */
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
font-size: 18px;
font-weight: bold;
border-radius: 8px;
display: inline-block;
transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 기본 그림자 */
}
/* 마우스 올렸을 때 애니메이션 효과 */
.animated-button:hover {
background-color: #45a049; /* 배경색 변경 */
transform: scale(1.1); /* 크기 확대 */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 그림자 확대 */
}
- 기본 버튼 스타일링:
- background-color: #4CAF50: 기본 배경색을 녹색으로 설정합니다.
- color: white: 텍스트 색상을 흰색으로 설정합니다.
- padding: 버튼의 내부 여백을 설정하여 버튼을 더 크고 클릭하기 쉽게 만듭니다.
- border-radius: 버튼의 모서리를 둥글게 만듭니다.
- box-shadow: 기본적으로 버튼 아래에 약간의 그림자를 추가하여 부드럽고 입체적인 느낌을 줍니다.
- transition: transform, background-color, box-shadow 속성에 애니메이션 전환 효과를 부여합니다. 이 속성은 버튼이 호버 상태로 전환될 때 부드러운 변화를 제공합니다.
- 애니메이션 효과:
- hover 상태에서 배경색이 진해지고(background-color), 버튼 크기가 약간 커집니다(transform: scale(1.1)).
- box-shadow는 그림자의 크기를 키워서 버튼이 떠오르는 듯한 입체적인 효과를 줍니다.
이 코드로 마우스를 버튼 위에 올리면 부드럽게 커지면서 색상이 변하는 애니메이션 버튼을 만들 수 있습니다. 필요에 따라 색상, 크기, 애니메이션 지속 시간 등을 조정하여 원하는 스타일로 변경할 수 있습니다.
728x90