Code ウェブサイト用フローティングコンタクトボタンのスタイルとHTMLコード

このコードは、ウェブサイト上に固定された連絡方法を表示するためのものです。具体的には、Zalo、Facebook、およびホットラインへの直接リンクを含むフローティングコンタクトボタンが設定されています。

スタイル定義部分では、.float-contact クラスがフローティング要素の位置とスタイルを定義しています。この要素は画面の左下に固定され、z-indexの値が非常に高く設定されているため、他の要素の上に表示されます。

.chat-zalo, .chat-face, そして .float-contact .hotline クラスは、それぞれのボタンの背景色、角の丸み、パディング、文字色などを設定しています。特に、各サービスに応じて異なる背景色が指定されています（例えば、Zaloは緑色、ホットラインは赤色）。

また、メディアクエリを使用して、画面幅が549ピクセル以下の場合には、フローティングボタンの位置とパディングを調整し、フォントサイズを小さくしています。

最後に、HTML部分では、実際にユーザーがクリックできる3つのボタン（Zalo、Facebook、ホットライン）が定義されており、それぞれに対応するリンクが設定されています。これにより、ユーザーは直接対応するサービスにアクセスすることができます。

<style>
.float-contact {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 99999;
}

.chat-zalo, .chat-face, .float-contact .hotline {
    background: #125c9e;
    border-radius: 20px;
    padding: 0 18px;
    color: white;
    display: block;
    margin-bottom: 6px;
}

.chat-zalo {
    background: #8eb22b;
}

.float-contact .hotline {
    background: #d11a59!important;
}

.chat-zalo a, .chat-face a, .hotline a {
    font-size: 15px;
    color: white;
    font-weight: 400;
    text-transform: none;
    line-height: 0;
}

@media (max-width: 549px) {
    .float-contact {
        bottom: 10px;
        left: 10px;
    }

    .chat-zalo, .chat-face, .float-contact .hotline {
        padding: 0 12px;
    }

    .chat-zalo a, .chat-face a, .hotline a {
        font-size: 12px;
    }
}
</style>

<div class="float-contact">
    <button class="chat-zalo">
        <a href="http://zalo.me/0867592210">Chat Zalo</a>
    </button>
    <button class="chat-face">
        <a href="http://m.me/telegramwebvn">Chat Facebook</a>
    </button>
    <button class="hotline">
        <a href="tel:[phone]">Hotline: [phone]</a>
    </button>
</div>