유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

Shiny CSS Button Animation in 60 Seconds

Frontend Tribe

2024. 3. 19.

0

#frontend
  • HTML에서 버튼을 만든 후 텍스트를 span 태그 안에 넣는다 🪄
  • CSS를 사용하여 버튼의 글씨 크기, 높이, 테두리 스타일, 패딩 등을 조절한다 🚀
  • 텍스트의 배경에 선형 그라디언트 이미지를 적용하고, 색상을 투명하게 설정하여 텍스트에만 배경이 나타나는 효과를 만든다 ✨
  • 2초 동안 오른쪽에서 왼쪽으로 배경 이미지를 이동시키는 애니메이션을 사용하여 버튼에 반짝이는 효과를 적용한다💫
  • 애니메이션은 무한히 반복되고 선형 타이밍 함수를 사용한다 ⏳

Recommanded Videos