WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
होवर के साथ सोशल मीडिया आइकन
2334
Andev.web
संपादक में खोलें
Video
अपना कोड प्रकाशित करें
4
अनुशंसित
19 May 2025
गेम एनीमेशन के लिए फ्लाई बॉक्स
20 April 2024
HTML और CSS का उपयोग करके सोशल आइकन
30 August 2024
3D कार्ड होवर प्रभाव
HTML
Copy
Andev Web
CSS
Copy
*, *::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; }
JS
Copy