icono de redes sociales con el cursor

1675 Andev.web

Abrir en el editor Publica tu código

Recomendado

9 September 2024

Barra de navegación responsiva premium de CodePen Home

24 November 2024

Tienda de zapatos

HTML

CSS

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background-color: #222221;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  display: flex;
  list-style: none;
  gap: 2.5rem;
}

.item a {
  text-decoration: none;
  width: 4.8rem;
  height: 4.8rem;
  background-color: #f0f9fe;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  border: 3px solid #f0f9fe;
  overflow: hidden;
}

.item a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--bg-color);
  z-index: 0;
  scale: 1 0;
  transform-origin: bottom;
  transition: scale 0.5s ease;
}

.item:hover a::before {
  scale: 1 1;
}

.icon {
  font-size: 2rem;
  color: hsl(203, 92%, 8%);
  transition: 0.5s ease;
  z-index: 2;
}

.item a:hover .icon {
  color: #fff;
  transform: rotateY(360deg);
}

.item:nth-child(1) {
  --bg-color: linear-gradient(to bottom right, #f9ce34, #ee2a7b, #6228d7);
}
.item:nth-child(2) {
  --bg-color: #0077b5;
}
.item:nth-child(3) {
  --bg-color: #ff0000;
}
.item:nth-child(4) {
  --bg-color: #000;
}

icono de redes sociales con el cursor

Recomendado

Galería de peces

Barra de navegación responsiva premium de CodePen Home

Tienda de zapatos

HTML

CSS

JS

Recomendado

Galería de peces

Barra de navegación responsiva premium de CodePen Home

Tienda de zapatos

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS