所有人请注意：动画按钮脱颖而出的秘诀（WordPress 特写）

网站的第一印象会对用户产生巨大影响，而一个吸引人的按钮动画尤其能吸引人们的注意，这可能会让访客出于好奇而点击它。

但如何让您的按钮脱颖而出呢？今天我们就来看看 对角线灯光动画效果按钮并使其在人群中脱颖而出。

在本篇文章中，您将学习如何让 WordPress 中使用的按钮栩栩如生。通过使用 HTML、CSS 和 JavaScript，我们将详细介绍如何让初学者也能轻松创建发光按钮，请务必继续阅读！

本帖介绍了可应用于 WordPress 主体的代码，因此如果您不具备相关技能，请谨慎使用。我们建议您复制本文章并将其作为草稿，因为存在删除或更改现有文章的风险。

对于那些赶时间的人，这里有一个摘要。将 #2 中的代码粘贴到 "附加 CSS "中，然后在正文中需要的位置插入 "user html"，接着粘贴 #1 和 #3 中的代码。(下面我们将解释如何在代码编辑器中，而不是在 "userhtml "中进行操作）。

步骤 3 按钮动画

1. 创建一个按钮

首先，将按钮添加到 WordPress 的正文中。

点击右上角的三点按钮 代码编辑器将切换到 HTML 模式 (Ctrl + Shift + Alt + M 快捷键).

然后，将下面的代码复制并粘贴到所需位置。

<a href="https://example.com" class="shining-button">点击</a>

这段代码创建了一个简单的按钮，文字为 "点击此处"。点击后，该按钮将带您访问 example.com。

您可以将按钮的文本内容改为任何您想要的内容，如 "了解更多信息"，并将链接地址改为任何您想要的地址。

2. 应用 CSS 样式

现在，让我们为按钮添加样式和动画。

将下面的 CSS 代码添加到 WordPress 的自定义 CSS 编辑器（外观 > 自定义 > 附加 CSS）中。

您可以根据自己的喜好更改颜色（目前为：普通橙色、蓝色按钮）。 寻找正确色彩 "的艺术--从提取图像中的色彩到和谐的色彩搭配 看看这篇文章。

.shining-button {
    position: relative；
    display: inline-block；
    padding：10px 20px；
    font-size: 16px；
    color: #fff；
    background-colour: #ff9800; /* 橙色 */
    border: none；
    border-radius: 5px；
    overflow: hidden；
    cursor: pointer；
    text-decoration: none；

    transition: background-colour .3s；
}
.shining-button::before {
    content: ''；
    position: absolute；
    top: 0；
    left：-200%；
    width: 200%；
    height: 100%；
    transform: skewX(-45deg)；
    background: linear-gradient(135deg, transparent 75%, rgba(255,255,255,.5) 75%, rgba(255,255,255,.5) 80%, transparent 80%)；
    过渡：左 1 秒，不透明度 1 秒；
    不透明度：0；
}
.shining-button:hover { background-colour: #0073aa; }
.shining-button.shine::before {
    left: 100%；
    opacity: 1；
}

这段 CSS 代码设置了按钮的默认样式，将悬停时的背景颜色从橙色改为蓝色，并创建了斜光动画效果。

3. 利用 JavaScript 制作循环动画

如果希望动画定期重复，可以使用 JavaScript。在代码编辑器的 HTML 模式下，将下面的代码添加到上面 #1 的代码中。

</script

该脚本会定期调用 发光 重复动画，添加和删除类别。

设置间隔 功能，将动画设置为每 1.5 秒重复一次（1500）。

在线申请前在当地进行测试

在 WordPress 上应用按钮效果之前，最好先在本地（自己的电脑上）进行测试。

您要事先确保您的帖子看起来是您想要的样子。请按照以下步骤开始操作。

HTML 文件（完整）

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shining Button Test</title>
    <style>
        .shining-button {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: #ff9800; /* 오렌지색 */
            border: none;
            border-radius: 5px;
            overflow: hidden;
            cursor: pointer;
            text-decoration: none;
            transition: background-color .3s;
        }
        .shining-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -200%; 
            width: 200%;
            height: 100%;
            transform: skewX(-45deg);
            background: linear-gradient(135deg, transparent 75%, rgba(255,255,255,.5) 75%, rgba(255,255,255,.5) 80%, transparent 80%);
            transition: left 1s, opacity 1s;
            opacity: 0;
        }
        .shining-button:hover { background-color: #0073aa; }
        .shining-button.shine::before { 
            left: 100%; 
            opacity: 1;
        }
    </style>
</head>
<body>
    <a href="https://example.com" class="shining-button">点击</a>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const button = document.querySelector('.shining-button');
            setInterval(() => {
                button.classList.toggle('shine');
            }, 1500); 
        });
    </script>
</body>
</html>

如何运行

  1. 复制上述代码，打开记事本，粘贴并将其保存为 HTML 文档（例如：Filename-.button_test.html, FileType-AllFiles)
  2. 导航至保存 button_test.html 点击该文件以验证按钮是否正常工作，外观是否符合您的要求。

通过这段代码，您应该可以看到按钮从橙色变为蓝色，并应用了斜光动画。

如果将上述方法应用到帖子正文中，就会如下所示。一起来看看如何熟悉编码吧~ ^^

使用人工智能编码 - 熟悉 🤞

组织起来

如上所述创建的按钮动画通常会以橙色为背景，并有一束光线穿过，当您将鼠标悬停在该按钮上时，背景颜色将变为蓝色，光线动画也将继续。

使用发光按钮是吸引用户注意力的好方法。即使你是 WordPress 设计的新手，只要跟着做，也很容易实现，所以不妨一试！

查看 # 按钮动画源代码解释

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shining Button Test</title>
    <style>
        .shining-button {
            position: relative; /* 버튼 내부에 위치한 요소를 상대적으로 배치 */
            display: inline-block; /* 인라인 요소처럼 표시되지만, 블록 요소의 속성도 가짐 */
            padding: 10px 20px; /* 버튼 내부의 여백 설정 */
            font-size: 16px; /* 글자 크기 설정 */
            color: #fff; /* 글자 색상 흰색으로 설정 */
            background-color: #ff9800; /* 버튼 배경색을 오렌지색으로 설정 */
            border: none; /* 테두리 제거 */
            border-radius: 5px; /* 버튼 모서리를 둥글게 설정 */
            overflow: hidden; /* 자식 요소가 버튼 영역을 벗어나지 않도록 설정 */
            cursor: pointer; /* 마우스를 올리면 커서가 포인터로 변경 */
            text-decoration: none; /* 링크의 밑줄 제거 */
            transition: background-color .3s; /* 배경색 변경에 부드러운 전환 효과 설정 */
        }
        .shining-button::before {
            content: ''; /* 가상 요소에 내용을 비워둠 */
            position: absolute; /* 절대 위치로 배치 */
            top: 0; /* 상단에 위치 */
            left: -200%; /* 왼쪽 밖으로 시작 위치 설정 */
            width: 200%; /* 가로 길이를 두 배로 설정 */
            height: 100%; /* 버튼의 높이와 동일하게 설정 */
            transform: skewX(-45deg); /* X축을 기준으로 45도 기울이기 */
            background: linear-gradient(135deg, transparent 75%, rgba(255,255,255,.5) 75%, rgba(255,255,255,.5) 80%, transparent 80%); /* 사선 빛 효과 설정 */
            transition: left 1s, opacity 1s; /* 위치와 투명도 변화에 부드러운 전환 효과 설정 */
            opacity: 0; /* 초기 투명도를 0으로 설정 */
        }
        .shining-button:hover { 
            background-color: #0073aa; /* 마우스를 올리면 배경색을 푸른색으로 변경 */
        }
        .shining-button.shine::before { 
            left: 100%; /* 가상 요소를 오른쪽으로 이동 */
            opacity: 1; /* 투명도를 1로 설정하여 보이게 함 */
        }
    </style>
</head>
<body>
    <a href="https://example.com" class="shining-button">点击</a> <!-- 링크가 걸린 버튼 -->
    <script>
        document.addEventListener('DOMContentLoaded', () => { 
            const button = document.querySelector('.shining-button'); /* 클래스명이 shining-button인 요소 선택 */
            setInterval(() => {
                button.classList.toggle('shine'); /* 1.5초마다 shine 클래스를 추가/제거하여 애니메이션 실행 */
            }, 1500); /* 1.5초마다 실행 */
        });
    </script>
</body>
</html>

更多信息，请参阅 这里了解更多，外面的世界很大。

类似文章