Liquid Glass CTA

网站 · CTA · 免费
内容预览

Build a "CTA + Footer" section component for a React + Vite + Tailwind CSS project. This is a cinematic full-width call-to-action section with an HLS video background, centered text, two CTA buttons, and a minimal footer bar at the bottom. Black background, white text, liquid glassmorphism effects. --- ### FONTS (import in index.css or HTML head) ``` https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap ``` - Headings: `Instrument Serif` italic -- Tailwind class `font-heading` - Body: `Barlow` -- Tailwind class `font-body` Add to `tailwind.config.ts` under `theme.extend.fontFamily`: ```js heading: ["'Instrument Serif'", "serif"], body: ["'Barlow'", "sans-serif"], ``` Base styles in `index.css`: ```css body { font-family: 'Barlow', sans-serif; background: #000; color: #fff; } h1, h2, h3 { font-family: 'Instrument Serif', serif; } ``` --- ### LIQUID GLASS CSS (add to index.css inside `@layer components`) ```css @layer components { .liquid-glass-strong { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border: none; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.15); position: relative; overflow: hidden; } .liquid-glass-strong::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 2

……（完整源码请在站内查看）