<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Purple CTA Button</title>
<style>
/* ซ่อน Scrollbar ทั้งหมด */
html, body {
overflow: hidden;
margin: 0;
padding: 0;
}
/* ปรับตำแหน่ง body ให้จัดปุ่มอยู่ด้านล่างสุดของหน้าจอ */
body {
display: flex;
justify-content: center; /* จัดให้อยู่กลางตามแนวขนาน (ซ้าย-ขวา) */
align-items: flex-end; /* ดันองค์ประกอบลงมาชิดด้านล่างสุด */
min-height: 100vh;
padding-bottom: 24px; /* เพิ่มระยะห่างจากขอบล่างเล็กน้อยเพื่อความสวยงาม (ปรับ/ลบได้) */
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* สไตล์หลักของปุ่ม CTA */
.cta-button {
position: relative;
padding: 16px 40px;
font-size: 18px;
font-weight: 600;
color: #ffffff;
background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50px;
cursor: pointer;
overflow: hidden;
outline: none;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
/* เอฟเฟกต์แสงสะท้อนวิ่งผ่าน (Shimmering Light Effect) */
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
transition: left 0.7s ease;
}
/* สไตล์สำหรับไอคอนลูกศร */
.arrow-icon {
width: 20px;
height: 20px;
fill: none;
transition: transform 0.3s ease;
}
/* การทำงานเมื่อวางเมาส์เหนือปุ่ม (Hover) */
.cta-button:hover {
transform: translateY(-4px) scale(1.03);
box-shadow: 0 15px 30px rgba(124, 58, 237, 0.5);
background: linear-gradient(135deg, #8b5cf6 0%, #5b21b6 100%);
}
/* เล่นแสงสะท้อนเมื่อ Hover */
.cta-button:hover::before {
left: 100%;
}
/* ขยับไอคอนลูกศรไปทางขวาเมื่อ Hover */
.cta-button:hover .arrow-icon {
transform: translateX(6px);
}
/* เอฟเฟกต์เมื่อกดปุ่ม (Active) */
.cta-button:active {
transform: translateY(-1px) scale(0.98);
box-shadow: 0 5px 15px rgba(124, 58, 237, 0.4);
}
</style>
</head>
<body>
<a href="https://sites.google.com/cp.ac.th/kruzamcs/index" class="cta-button">
ปุ่ม Call to Action เชื่อมโยงหน้าเว็บ
<svg class="arrow-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</body>
</html>