<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CTA Button Example</title>
<style>
.desktop_cta {
width: 50%;
border-radius: 8px;
font-size: 16px;
}
.mobile_cta {
width: 50%;
border-radius: 30px;
font-size: 13px;
}
.desktop_cta2 {
width: 60px;
height: 60px;
background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fcf74270b-7095-4219-aac0-641727aacf32%2Fchnnel.png&blockId=961d6d78-4fbd-430f-bbf2-5574d2cc0e0a');
background-size: cover;
border-radius: 14px;
left: 94%;
font-size: 16px;
}
.mobile_cta2 {
width: 48px;
height: 48px;
background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fcf74270b-7095-4219-aac0-641727aacf32%2Fchnnel.png&blockId=961d6d78-4fbd-430f-bbf2-5574d2cc0e0a');
background-size: cover;
border-radius: 14px;
left: 90%;
font-size: 16px;
margin-right: 10px;
}
@keyframes slide-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
</style>
</head>
<body>
<script>
// 두 번째 CTA 버튼
const ctaButton2 = document.createElement('a');
ctaButton2.style.bottom = "16px";
ctaButton2.style.color = "#ffffff";
ctaButton2.style.position = "fixed";
ctaButton2.style.transform = "translateX(-50%)";
ctaButton2.style.textAlign = "center";
ctaButton2.style.padding = "12px";
ctaButton2.style.textDecoration = "none";
ctaButton2.style.fontWeight = "bold";
ctaButton2.style.boxShadow = "0px 0px 1px #ffffff";
ctaButton2.style.cursor = "pointer";
ctaButton2.style.zIndex = "9999";
ctaButton2.href = "https://wannago.channel.io/home";
// CTA 버튼을 body에 추가
document.body.appendChild(ctaButton2);
function checkWindowSize2() {
const windowWidth = window.innerWidth;
if (windowWidth <= 750) {
ctaButton2.classList.add("mobile_cta2");
ctaButton2.classList.remove("desktop_cta2");
} else {
ctaButton2.classList.add("desktop_cta2");
ctaButton2.classList.remove("mobile_cta2");
}
}
// 초기 윈도우 너비 상태 확인
checkWindowSize2();
// 윈도우 크기 변경 시 이벤트 리스너 등록
window.addEventListener('resize', checkWindowSize2);
</script>
</body>
</html>
HTML
복사
