浮动 WhatsApp 按钮 HTML

在网站上添加 WhatsApp 按钮是一种很好的方式，可以方便地与您的用户进行实时沟通，并为您的业务增加更多的信任感。在本文中，将介绍如何使用 HTML 和 CSS 创建一个浮动 WhatsApp 按钮。

HTML 代码片段

以下是 HTML 代码片段，用于创建 WhatsApp 按钮。请将代码粘贴到您的网站页面中的适当位置。

<div class="whatsapp">
    <a href="https://wa.me/+1XXXXXXXXXX" target="_blank">
        <i class="fa fa-whatsapp"></i>
    </a>
</div>

在代码中，将 https://wa.me/+1XXXXXXXXXX 替换为您的 WhatsApp 号码。请注意，+1 代表的是国际代码，这应该视您所在的国家而定。

CSS 代码片段

以下是 CSS 代码片段，用于将 WhatsApp 按钮设置为浮动按钮。

.whatsapp {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
}

.whatsapp a {
    background-color: #25D366;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    font-size: 25px;
    color: #FFF;
}

.whatsapp a:hover {
    background-color: #128C7E;
}

在代码中，可以使用 position: fixed 属性将按钮固定在右下角。使用 z-index 属性可确保按钮始终在其他元素的上方。

结论

现在您已了解如何使用 HTML 和 CSS 创建浮动 WhatsApp 按钮。这是使您的网站更加友好和易用的好方法。现在您可以尝试将此片段应用到您的网站中并自定义样式以适应您的需要。