style: polish enter button with gradient, inner highlight, arrow icon, and premium hover effects

This commit is contained in:
remco committed 2026-07-01 18:03:52 +02:00
1 parent d7138f3a32
commit d588ae5f0f
1 file changed
+5 -4
+5 -4
View File
@@ -237,15 +237,16 @@ export default async function HomePage() {
<Link href="/client"> <Link href="/client">
<button <button
type="button" type="button"
className="rounded-full px-6 py-2.5 text-sm font-bold tracking-wide transition-all duration-200 hover:scale-105" className="group rounded-full px-7 py-3 text-sm font-bold tracking-wider transition-all duration-300 hover:scale-105 active:scale-95"
style={{ style={{
background: "var(--button-color)", background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 92%, white), color-mix(in srgb, var(--color-primary) 92%, black))",
color: "var(--button-text-color)", color: "var(--button-text-color)",
border: "none", border: "1px solid color-mix(in srgb, var(--color-primary) 60%, rgba(255,255,255,0.2))",
boxShadow: "0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)", boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent), inset 0 1px 0 rgba(255,255,255,0.2)",
}} }}
> >
Enter {hotelName} Enter {hotelName}
<svg className="inline-block ml-2 w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" /></svg>
</button> </button>
</Link> </Link>
</div> </div>