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
895
tinoriojunior
Abrir no Editor
Publique Seu Código
Recomendado
28 March 2025
CodePen Home Cartões Móveis Esboçados
27 June 2025
código de dança
24 April 2025
Um Código de Metehan
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`); } });