Web App Script CSS | Tạo button Liên hệ gồm 3 option đẹp mắt cho trang web
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:
- Web App Script CSS | Tạo button Liên hệ gồm 3 option đẹp mắt cho trang web
- Web App Script Webapp | Hiệu ứng hoa rơi – Form nhập liệu Gửi nội dung đến email
- Web App Script | Thanh trạng thái Status bar – Giá trị thể hiện theo điểm và label.
- Google sheet Apps script | Data Entry Form – Tự động đọc số tiền thành chữ ở trường input
- Google sheet Apps script | Cập nhật điểm lớp học – Theo danh sách lớp và Theo từng học sinh
- Google sheet, apps script Định dạng dấu phân cách hàng ngàn cho input
- Google sheet apps script | Chọn năm và kiểu biểu đồ để Load dữ liệu lên website
- Google sheet apps script | Scan QR code – Filter and get data table display on webapp
- Google sheet apps script Filter to get data to display on webapp, fill background color for data row
- Google sheet Apps script Webapp | Project Quản lý đơn hàng – Cập nhật sản phẩm – In phiếu kiểm soát
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>