클릭률 좋은 반짝이는 애니메이션 버튼

티스토리

HTML

편집기에서 HTML로 바꾸신 후에 아래 코드 넣으시면 됩니다.

“https://google.com” => 이동해야 할 페이지 URL로 업데이트 해주시고

반짝이는 애니메이션 버튼 => 버튼 위에 보이는 내용이니 이것도 각자에 맞게 업데이트 하시면 됩니다

그전에 CSS부터 업데이트 하셔야 사용가능합니다.

<a href="https://google.com" 
   class="shiny-button-link">
    <button class="shiny-button">
        반짝이는 애니메이션 버튼
        <span class="shiny-effect"></span>
    </button>
</a>

css

스킨편집 가셔서 HTML편집 누르시고

CSS로 가셔서 맨 아래에다 아래 내용 붙여넣기 하시면 됩니다

css
.shiny-button-link {
    text-decoration: none;
}

.shiny-button {
    margin: 20px auto;
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    background-color: #2ecc71;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.5s ease, transform 0.5s ease, font-size 0.5s ease;
    width: 80%;
    text-align: center;
    display: block;
    will-change: transform, background-color, font-size;
    position: relative;
    overflow: hidden;
}

.shiny-button:hover {
    transform: scale(1.2);
    background-color: orange;
    text-decoration: underline;
    font-size: 24px;
}

.shiny-button .shiny-effect {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    z-index: 1;
    animation: shine 2s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

워드프레스

HTML

편집기에서 아래 코드를 사용하시면 됩니다.

사용자 정의 HTML 오픈하시면 아래와 같이 나오는데

저곳에 아래 코드 붙여넣으시면 됩니다.

“https://google.com” => 이동해야 할 페이지 URL로 업데이트 해주시고

반짝이는 애니메이션 버튼 => 버튼 위에 보이는 내용이니 이것도 각자에 맞게 업데이트 하시면 됩니다

그전에 CSS부터 업데이트 하셔야 사용가능합니다.

<a href="https://google.com" 
   style="text-decoration: none;">
    <button 
        style="
            margin: 20px auto;
            padding: 20px;
            font-size: 20px;
            font-weight: bold;
            color: white;
            background-color: #2ecc71;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: background-color 0.5s ease, transform 0.5s ease, font-size 0.5s ease;
            width: 80%;
            text-align: center;
            display: block;
            will-change: transform, background-color, font-size;
            position: relative;
            overflow: hidden;
        "
        onmouseover="this.style.transform='scale(1.2)'; this.style.backgroundColor='orange'; this.style.textDecoration='underline'; this.style.fontSize='24px';"
        onmouseout="this.style.transform='scale(1.0)'; this.style.backgroundColor='#2ecc71'; this.style.textDecoration='none'; this.style.fontSize='20px';"
    >
        반짝이는 애니메이션 버튼
        <span style="
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%);
            transform: skewX(-25deg);
            z-index: 1;
            animation: shine 2s infinite;
        "></span>
    </button>
</a>

css

관리창 가셔서 모양에서 테마 파일 편집기를 선택합니다.

그런 다음 테마파일을 수정해 줘야 합니다.

style.css와 editor-style.css에 아래 코드를 제일 밑에 붙여넣기 해주시면 됩니다.

제가 사용하는 theme은 OnePress네요

theme마다 방법이 상이할수 있으니 막히시는 분은 문의해 주세요

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}