Tailwind active 클릭 하는 시점 효과 / 버튼 효과

agnusdei1207 2023. 5. 18. 14:42

SMALL

<app-icon
          [src]="isSwiperRunning ? 'assets/icon/pause.svg' : 'assets/icon/resume.svg'"
          class="w-4 h-4 text-white transition-all active:scale-110"
        />

1. 클릭 시 active:

2. scale-110 : 클릭하는 순간 커지고 다시 작아짐

3. trasition-all : 자연스러운 효과를 위해 서서히 동작하도록 설정

LIST