होवर के साथ सोशल मीडिया आइकन

2331 Andev.web

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

7 September 2024

कोड प्रभाव के साथ CSS एनिमेटेड लोडिंग स्क्रीन

23 September 2023

ग्लोइंग होवर टेक्स्ट

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

होवर के साथ सोशल मीडिया आइकन

अनुशंसित

भूकेन्द्रित ब्रह्मांड

कोड प्रभाव के साथ CSS एनिमेटेड लोडिंग स्क्रीन

ग्लोइंग होवर टेक्स्ट

HTML

CSS

JS

अनुशंसित

भूकेन्द्रित ब्रह्मांड

कोड प्रभाव के साथ CSS एनिमेटेड लोडिंग स्क्रीन

ग्लोइंग होवर टेक्स्ट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS