CSS 누르면 반짝이는 버튼 애니메이션 만들기

반짝이는 버튼 애니메이션 만들기

CSS로 반짝이는 금색 버튼 애니메이션을 만들어보겠습니다. 이 글에서는 해당 애니메이션을 만들기 위한 단계별 가이드를 제공하겠습니다.

HTML 구조 설정

먼저 HTML 구조를 설정합니다. 아래 코드는 간단한 버튼을 생성하는 예제입니다.

    
    
    
    


    클릭하세요

CSS 스타일링

이제 CSS를 사용하여 버튼을 스타일링하고 애니메이션을 추가합니다. 스타일 파일 “styles.css”를 만들고 다음과 같이 작성합니다.

/* styles.css */

.gold-button {
    background-color: gold;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.gold-button:hover {
    background-color: #ffcc00; /* 반짝임 효과를 위한 다른 색상 사용 */
    animation: blink 0.5s infinite alternate;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}

설명

• .gold-button 클래스는 금색 배경색과 반짝임 효과를 갖는 버튼 스타일을 정의합니다.
• :hover 가상 클래스를 사용하여 마우스 오버시 반짝임 효과를 추가합니다.
• @keyframes를 사용하여 blink 애니메이션을 정의하고 버튼이 번갈아 가리키도록 합니다.

미리보기

클릭하세요

결론

이제 여러분은 CSS를 사용하여 반짝이는 금색 버튼 애니메이션을 만들 수 있습니다. 반짝이는 버튼으로 웹 페이지를 더 흥미롭게 만들어보세요!