WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
एचटीएमएल सोशल आइकन्स
5425
webleb
अपना कोड प्रकाशित करें
अनुशंसित
21 January 2024
3डी सोशल आइकन कोड
8 March 2024
एचटीएमएल सीएसएस नैवबार टेम्पलेट
14 June 2024
होवर के साथ सोशल मीडिया आइकन
index.html
Copy
Webleb
styles.css
Copy
body{ height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #0F2027; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .card { width: fit-content; height: fit-content; background-color: rgb(238, 238, 238); display: flex; align-items: center; justify-content: center; padding: 25px 25px; border-radius: 15px; gap: 20px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055); } a{ text-decoration: none!important; } .socialContainer { width: 52px; height: 52px; background: #0F2027; /* fallback for old browsers */ background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ display: flex; align-items: center; justify-content: center; overflow: hidden; transition-duration: .3s; border-radius: 15px; } .containerOne:hover { background-color: #d62976; transition-duration: .3s; } .containerTwo:hover { background-color: #00acee; transition-duration: .3s; } .containerThree:hover { background-color: #0072b1; transition-duration: .3s; } .containerFour:hover { background-color: #128C7E; transition-duration: .3s; } .socialContainer:active { transform: scale(0.9); transition-duration: .3s; } .socialIcon { color: white; } .socialContainer:hover .socialIcon { animation: slide-in-top 0.3s both; } @keyframes slide-in-top { 0% { transform: translateY(-50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
main.js
Copy
// Nothing to copy