본문 바로가기
Front-end/애니메이션

버튼에 다양한 인터랙션 효과 적용하기

by mooyou 2025. 5. 20.
728x90
300x250
SMALL

 

앞서 배운 hover, transtion, transform, animation을 조합하여 실전 UI 효과를 구현해 봅시다.


예제 목록

  • 호버 시 색상과 크기가 동시에 바뀌는 버튼
  • 클릭 시 눌리는 느낌의 버튼(:active)
  • 포커스 시 강조되고 깜빡이는 애니메이션 추가
  • disabled 상태일 때 스타일 변경
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <style>
    .fancy-btn {
      padding: 12px 24px;
      font-size: 16px;
      background-color: #2980b9;
      color: #fff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .fancy-btn:hover {
      background-color: #1abc9c;
      transform: scale(1.05);
    }

    .fancy-btn:active {
      transform: scale(0.95);
    }

    .fancy-btn:focus {
      outline: 2px solid #f39c12;
      animation: focus-blink 1s infinite;
    }

    @keyframes focus-blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }

    .fancy-btn:disabled {
      background-color: #bdc3c7;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <button class="fancy-btn">버튼 효과 보기</button>
</body>
</html>

 

728x90
반응형
LIST

댓글