WhatsApp

<!-- 52YM WhatsApp Floating Button -->
<div id="ym-whatsapp-widget" data-nosnippet>
    <a
        id="ym-whatsapp-btn"
        href="https://wa.me/12022099136?text=Hello%2C%20I%20am%20visiting%2052ym.com%20and%20would%20like%20more%20information."
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Contact 52YM on WhatsApp"
    >
        <span class="ym-wa-icon" aria-hidden="true">
            <svg viewBox="0 0 32 32">
                <path fill="currentColor" d="M16.04 3C9.4 3 4 8.25 4 14.7c0 2.28.68 4.5 1.97 6.4L4 27l6.12-1.91a12.25 12.25 0 0 0 5.91 1.52h.01C22.67 26.61 28 21.36 28 14.9 28 8.44 22.68 3 16.04 3Zm0 21.63h-.01a10.1 10.1 0 0 1-5.15-1.41l-.37-.22-3.63 1.13 1.18-3.45-.24-.36a9.65 9.65 0 0 1-1.6-5.33C6.22 9.66 10.62 5 16.05 5c5.42 0 9.73 4.65 9.73 9.97 0 5.33-4.32 9.66-9.74 9.66Zm5.34-7.25c-.29-.14-1.73-.84-2-.93-.27-.1-.47-.14-.67.14-.2.29-.77.94-.95 1.13-.17.19-.35.21-.64.07-.3-.14-1.24-.45-2.36-1.43a8.77 8.77 0 0 1-1.64-1.99c-.17-.29-.02-.44.13-.58.13-.13.29-.34.44-.5.14-.17.19-.29.29-.48.1-.19.05-.36-.02-.5-.08-.15-.67-1.6-.92-2.19-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.36-.27.29-1.04 1-1.04 2.45s1.07 2.84 1.22 3.04c.14.19 2.1 3.15 5.09 4.42.71.3 1.26.49 1.7.63.71.22 1.36.19 1.87.12.57-.08 1.73-.7 1.98-1.37.24-.67.24-1.24.17-1.36-.07-.12-.27-.19-.56-.33Z"/>
            </svg>
        </span>

        <span class="ym-wa-text">WhatsApp</span>
    </a>
</div>

<style>
/* ===============================
   52YM WhatsApp Floating Button
   =============================== */

#ym-whatsapp-widget,
#ym-whatsapp-widget * {
    box-sizing: border-box;
}

#ym-whatsapp-widget {
    position: fixed;

    /* 距离右边 */
    right: 28px;

    /* 距离底部 */
    bottom: 35px;

    z-index: 99999;

    font-family:
        Arial,
        Helvetica,
        "Helvetica Neue",
        sans-serif;
}

/* 主按钮 */
#ym-whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    min-width: 218px;
    height: 82px;

    padding: 0 28px;

    background: #61d276;

    border-radius: 45px;

    color: #ffffff !important;

    text-decoration: none !important;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.14);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease;

    -webkit-tap-highlight-color: transparent;
}

/* WhatsApp 图标 */
.ym-wa-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    color: #ffffff;
}

.ym-wa-icon svg {
    display: block;

    width: 40px;
    height: 40px;
}

/* WhatsApp 文字 */
.ym-wa-text {
    display: block;

    color: #ffffff;

    font-size: 23px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: -0.2px;
}

/* 鼠标经过 */
#ym-whatsapp-btn:hover {
    background: #53ca69;

    transform: translateY(-3px);

    box-shadow:
        0 19px 42px rgba(0, 0, 0, 0.18);

    color: #ffffff !important;
}

/* 点击 */
#ym-whatsapp-btn:active {
    transform: translateY(0);
}

/* 键盘访问 */
#ym-whatsapp-btn:focus-visible {
    outline: 3px solid #222222;
    outline-offset: 4px;
}

/* ===============================
   手机端
   =============================== */

@media (max-width: 767px) {

    #ym-whatsapp-widget {
        right: 16px;
        bottom: 20px;
    }

    #ym-whatsapp-btn {
        min-width: 168px;
        height: 62px;

        padding: 0 20px;

        gap: 10px;

        border-radius: 34px;
    }

    .ym-wa-icon {
        width: 31px;
        height: 31px;
    }

    .ym-wa-icon svg {
        width: 31px;
        height: 31px;
    }

    .ym-wa-text {
        font-size: 18px;
    }
}

/* ===============================
   很小的手机
   =============================== */

@media (max-width: 380px) {

    #ym-whatsapp-btn {
        min-width: 152px;
        height: 56px;

        padding: 0 17px;
    }

    .ym-wa-icon,
    .ym-wa-icon svg {
        width: 28px;
        height: 28px;
    }

    .ym-wa-text {
        font-size: 17px;
    }
}

/* 用户系统选择减少动画时关闭动画 */
@media (prefers-reduced-motion: reduce) {

    #ym-whatsapp-btn {
        transition: none;
    }

}
</style>