icône de médias sociaux avec survol

2330 Andev.web

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

2 March 2025

Modèle HTML CSS de carte de profil Neumorphic

8 February 2025

Un code par bachir123

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

icône de médias sociaux avec survol

Recommandé

Un code de M. Duck

Modèle HTML CSS de carte de profil Neumorphic

Un code par bachir123

HTML

CSS

JS

Recommandé

Un code de M. Duck

Modèle HTML CSS de carte de profil Neumorphic

Un code par bachir123

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS