Iconos sociales con CSS

5638 codex

Abrir en el editor Video Publica tu código

Recomendado

22 November 2025

Animación de carga de CSS Spinner

28 September 2025

Ejemplo de animación de carga CSS

7 January 2026

Plantilla HTML de comercio electrónico: Sitio de compras con Tailwind

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>
    Webleb
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="/css/styles.css" />
</head>
<body style="display: flex; justify-content:center ; align-items: center;height: 100vh;overflow: hidden;">
  <main>
	
    <button style="border-bottom-left-radius: 10px;border-top-left-radius: 10px;">
      <ion-icon name="logo-facebook"></ion-icon>
    </button>
    <button>
      <ion-icon name="logo-twitter"></ion-icon>
    </button>
    <button>
      <ion-icon name="logo-instagram"></ion-icon>
    </button>
    <button style="border-bottom-right-radius: 10px;border-top-right-radius: 10px;">
      <ion-icon name="logo-youtube"></ion-icon>
    </button>
  
  </main>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #121212;
    cursor: none;
}
.cursor {
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 100;
}
.cursor--large {
    --size: 40px;
    border: 1px solid #423cff;
}
.cursor--small {
    --size: 10px;
    background: #423cff;
    transform: translate(-50%, -50%);
}
main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
main button {
    --size: 60px;
    border: none;
    min-width: var(--size);
    min-height: var(--size);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transition: background 200ms ease, color 200ms ease;
    cursor: none;
}
main:hover button {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.04);
}
main:hover button:hover {
    color: #fff;
}

JS

console.clear();

const { gsap } = window;

const cursorOuter = document.querySelector(".cursor--large");
const cursorInner = document.querySelector(".cursor--small");
let isStuck = false;
let mouse = {
	x: -100,
	y: -100,
};

// Just in case you need to scroll
let scrollHeight = 0;
window.addEventListener('scroll', function(e) {
	scrollHeight = window.scrollY
})

let cursorOuterOriginalState = {
	width: cursorOuter.getBoundingClientRect().width,
	height: cursorOuter.getBoundingClientRect().height,
};
const buttons = document.querySelectorAll("main button");

buttons.forEach((button) => {
	button.addEventListener("pointerenter", handleMouseEnter);
	button.addEventListener("pointerleave", handleMouseLeave);
});

function updateCursorPosition(e) {
	mouse.x = e.pageX;
	mouse.y = e.pageY;
}

function updateCursor() {
	gsap.set(cursorInner, {
		x: mouse.x,
		y: mouse.y,
	});

if (!isStuck) {
		gsap.to(cursorOuter, {
			duration: 0.15,
			x: mouse.x - cursorOuterOriginalState.width/2,
			y: mouse.y - cursorOuterOriginalState.height/2,
		});
	}

requestAnimationFrame(updateCursor);
}

updateCursor();

function handleMouseEnter(e) {
	isStuck = true;
	const targetBox = e.currentTarget.getBoundingClientRect();
	gsap.to(cursorOuter, 0.2, {
		x: targetBox.left, 
		y: targetBox.top + scrollHeight,
		width: targetBox.width,
		height: targetBox.width,
		borderRadius: 0,
		backgroundColor: "rgba(255, 255, 255, 0.1)",
	});
}

function handleMouseLeave(e) {
	isStuck = false;
	gsap.to(cursorOuter, 0.2, {
		width: cursorOuterOriginalState.width,
		height: cursorOuterOriginalState.width,
		borderRadius: "50%",
		backgroundColor: "transparent",
	});
}

Recomendado

Animación de carga de CSS Spinner

Ejemplo de animación de carga CSS

Plantilla HTML de comercio electrónico: Sitio de compras con Tailwind

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS