WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Cartões de links de mídia social HTML
370
tinoriojunior
Abrir no Editor
Publique Seu Código
Recomendado
30 May 2025
Codificando a página de login do Facebook manualmente
14 September 2024
Interação com Pôster de Filme
30 January 2025
Página de destino do Chef Pessoal
HTML
Copy
Andev Web
Instagram
Followers:
33K
Follow me
GitHub
Followers:
330
Follow me
Linkedin
Followers:
550
Follow me
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"); *, *::after, *::before { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Poppins", sans-serif; min-height: 100vh; background-color: #060606; display: grid; place-items: center; color: white; } #cards { width: 70%; padding-inline: 20px; display: flex; flex-wrap: wrap; gap: 30px; } .card { min-width: 200px; height: 350px; flex: 1 1 250px; background-color: rgba(255, 255, 255, 0.12); border-radius: 12px; position: relative; } #cards:hover > .card { background: radial-gradient( 400px circle at var(--mouse-x) var(--mouse-y), hsl(var(--color) / 1), rgba(255, 255, 255, 0.12) 40% ); } .card-content { position: absolute; inset: 1px; background-color: #131315; border-radius: inherit; } .card:nth-child(1) { --color: 348 80% 60%; } .card:nth-child(2) { --color: 0 0% 100%; } .card:nth-child(3) { --color: 220 100% 35%; } .card::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: radial-gradient( 500px circle at var(--mouse-x) var(--mouse-y), hsl(var(--color) / 0.35), transparent 40% ); border-radius: inherit; opacity: 0; z-index: 2; } #cards:hover > .card::before { opacity: 1; } a { all: unset; cursor: pointer; } .card-content { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 18px; align-items: center; } .card-content > i { font-size: 10rem; color: rgba(255, 255, 255, 0.5); } .card-content > p { color: rgba(255, 255, 255, 0.5); } .card-content > a { width: 90%; padding-block: 0.8rem; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; display: flex; justify-content: center; align-items: center; gap: 8px; z-index: 10; } .card-content > a:hover { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }
JS
Copy
const cards = Array.from(document.querySelectorAll(".card")); const cardsContainer = document.querySelector("#cards"); cardsContainer.addEventListener("mousemove", (e) => { for (const card of cards) { const rect = card.getBoundingClientRect(); x = e.clientX - rect.left; y = e.clientY - rect.top; card.style.setProperty("--mouse-x", `${x}px`); card.style.setProperty("--mouse-y", `${y}px`); } });