Web App Script CSS | Tạo button Liên hệ gồm 3 option đẹp mắt cho trang web

11/02/2025 giaoanppt 62 Lượt xem

Giaoan.link chia sẻ đến các bạn project về “Web App Script CSS – Tạo button Liên hệ gồm 3 option đẹp mắt cho trang web“. Ở đây, bạn sẽ có một button nằm ở trên lớp trên cùng của web. Button này khi được click vào sẽ xuất hiện ra 3 button nhỏ, mỗi button nhỏ này bạn dễ dàng chèn vào 3 link đích mà bạn muốn. Bên dưới đây là video youtube demo và code apps script.

Bạn xem và tìm các project excel và google sheet apps script ở đây

Các project ngẫu nhiên xuất hiện:

XEM VIDEO PROJECT TRÊN YOUTUBE

Mã apps script “Code.gs”

function doGet() {
  return HtmlService.createTemplateFromFile('index')
      .evaluate()
      .addMetaTag('viewport', 'width=device-width, initial-scale=1')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

Mã apps script “index.html”

<!DOCTYPE html>
<html>
<head>
    <base target="_top">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }

      .contact-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #3498db;
        color: white;
        border: none;
        padding: 15px 20px;
        border-radius: 50px;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        display: flex;
        align-items: center;
        transition: transform 0.3s ease;
      }

      .contact-button:hover {
        transform: scale(1.05);
      }

       .contact-button span {
        margin-left: 5px;
      }

      .contact-options {
        position: fixed;
        bottom: 70px; /* Khoảng cách từ button chính */
        right: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 999;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none;
      }

      .contact-options.show {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }

      .contact-options button {
        background-color: #fff;
        border: none;
        padding: 10px 15px;
        border-radius: 5px;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        transition: background-color 0.3s ease;
      }
       .contact-options button:hover {
         background-color: #f0f0f0;
       }
       .contact-options button i {
            margin-right: 5px;
        }


      .contact-options button.zalo {
        color: #0088fe; /* Màu đặc trưng của Zalo */
      }
       .contact-options button.facebook {
        color: #1877f2; /* Màu đặc trưng của Facebook */
       }
      .contact-options button.youtube {
        color: #ff0000; /* Màu đặc trưng của Youtube */
      }
    </style>
</head>
<body>
    <button class="contact-button" id="contactBtn">
      <i class="fa fa-envelope"></i><span>Liên hệ</span>
    </button>
    <div class="contact-options" id="contactOptions">
      <button class="zalo" onclick="window.open('https://zalo.me/your-zalo-id', '_blank')"><i class="fab fa-zalo"></i>Zalo</button>
      <button class="facebook" onclick="window.open('https://facebook.com/your-facebook-page', '_blank')"><i class="fab fa-facebook"></i>Facebook</button>
      <button class="youtube" onclick="window.open('https://youtube.com/your-youtube-channel', '_blank')"><i class="fab fa-youtube"></i>Youtube</button>
    </div>

    <script>
        const contactBtn = document.getElementById('contactBtn');
        const contactOptions = document.getElementById('contactOptions');
        let isOptionsVisible = false;

        contactBtn.addEventListener('click', function() {
          isOptionsVisible = !isOptionsVisible;
          contactOptions.classList.toggle('show', isOptionsVisible);
        });

        // Ẩn menu khi click ra ngoài
        document.addEventListener('click', function(event) {
            if (!contactBtn.contains(event.target) && !contactOptions.contains(event.target)) {
                isOptionsVisible = false;
                contactOptions.classList.remove('show');
            }
        });
    </script>
</body>
</html>

Mã apps script “Code.gs”

Mã apps script “index.html”

giaoanppt

Để lại một bình luận Hủy