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

1987 Andev.web

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

अनुशंसित

10 February 2025

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

9 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