icône de médias sociaux avec survol

2,598 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 August 2024

Effet de survol de la consommation de soda

12 December 2025

Modèle HTML de site web de portfolio holographique

5 June 2025

Un code par alejandrokundrah

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;
}