CSS Socials Card code for free
Preview
Don't forget to give credit:- Mo Waseem
join my telegram channel for updates:- https://t.me/SawggerUi
sometimes link dosent work so copy the link and paste into saved message in telegram and the click on the link.
index.html
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8" />5
<title>Social Menu</title>6
<link rel="stylesheet" href="/css/styles.css">7
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"8
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="9
crossorigin="anonymous" referrerpolicy="no-referrer" />10
</head>11
<body>12
<div class="main">13
<div class="card">14
<span class="instagram"><i class="fab fa-instagram"></i></span>15
</div>16
<div class="card">17
<span class="twitter"><i class="fab fa-twitter"></i></span>18
</div>19
<div class="card">20
<span class="tiktok"><i class="fab fa-tiktok"></i></span>21
</div>22
<div class="card">23
<span class="facebook"><i class="fab fa-facebook"></i></span>24
</div>25
<div class="card">26
27
</div>28
<div class="card">29
<span class="discord"><i class="fab fa-discord"></i></span>30
</div>31
<div class="card">32
<span class="github"><i class="fab fa-github"></i></span>33
</div>34
<div class="card">35
<span class="telegram"><i class="fab fa-telegram"></i></span>36
</div>37
<div class="card">38
<span class="youtube"><i class="fab fa-youtube"></i></span>39
</div>40
<p class="text">Our Socials</p>41
<div class="main_back"></div>42
</div>43
</body>44
</html>styles.css
1
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");2
body{3
position: absolute;4
top: 50%;5
left: 50%;6
transform: translate(-50%, -50%);7
font-family: 'Poppins';8
}9
.main_back {10
position: absolute;11
border-radius: 10px;12
transform: rotate(90deg);13
width: 11em;14
height: 11em;15
background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);16
z-index: -2;17
box-shadow: inset 0px 0px 180px 5px #ffffff;18
}19
20
.main {21
display: flex;22
flex-wrap: wrap;23
width: 14em;24
align-items: center;25
justify-content: center;26
z-index: -1;27
}28
29
.card {30
width: 60px;31
height: 60px;32
border-top-left-radius: 10px;33
background: lightgrey;34
transition: .4s ease-in-out, .2s background-color ease-in-out, .2s background-image ease-in-out;35
background: rgba(255, 255, 255, 0.596);36
backdrop-filter: blur(5px);37
border: 1px solid transparent;38
-webkit-backdrop-filter: blur(5px);39
display: flex;40
align-items: center;41
justify-content: center;42
43
}44
45
.card .instagram {46
opacity: 0;47
transition: .2s ease-in-out;48
}49
50
.card:nth-child(2) .twitter {51
opacity: 0;52
transition: .2s ease-in-out;53
}54
55
.card:nth-child(3) {56
border-top-right-radius: 10px;57
border-top-left-radius: 0px;58
}59
60
.card:nth-child(3) .tiktok {61
opacity: 0;62
transition: .2s ease-in-out;63
}64
65
.card:nth-child(4) {66
border-radius: 0px;67
}68
69
.card:nth-child(4) .facebook {70
opacity: 0;71
transition: .2s ease-in-out;72
}73
74
.card:nth-child(5) {75
border-radius: 0px;76
}77
78
.card:nth-child(6) {79
border-radius: 0px;80
}81
82
.card:nth-child(6) .discord {83
opacity: 0;84
transition: .2s ease-in-out;85
fill: #8c9eff;86
}87
.card:nth-child(7) {88
border-bottom-left-radius: 10px;89
border-top-left-radius: 0px;90
}91
92
.card:nth-child(7) .github {93
opacity: 0;94
transition: .2s ease-in-out;95
fill: black;96
}97
98
.card:nth-child(8) {99
border-radius: 0px;100
}101
102
.card:nth-child(8) .telegram {103
opacity: 0;104
transition: .2s ease-in-out;105
fill: #29b6f6;106
}107
108
.card:nth-child(9) {109
border-bottom-right-radius: 10px;110
border-top-left-radius: 0px;111
}112
113
.card:nth-child(9) .youtube {114
opacity: 0;115
transition: .2s ease-in-out;116
}117
118
.main:hover {119
width: 14em;120
cursor: pointer;121
}122
123
.main:hover .main_back {124
opacity: 0;125
}126
127
.main:hover .card {128
margin: .2em;129
border-radius: 10px;130
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);131
border: 1px solid rgba(255, 255, 255, 0.334);132
background: rgba(255, 255, 255, 0.2);133
}134
135
.main:hover .card:nth-child(5) {136
border: transparent;137
}138
139
.main:hover .text {140
opacity: 0;141
z-index: -3;142
}143
144
.main:hover .youtube, 145
.main:hover .telegram,146
.main:hover .github,147
.main:hover .tiktok,148
.main:hover .instagram,149
.main:hover .discord,150
.main:hover .facebook,151
.main:hover .twitter{152
opacity: 1;153
}154
155
.card:nth-child(1):hover {156
background-color: #cc39a4;157
}158
.card:nth-child(2):hover {159
background-color: #03A9F4;160
}161
162
163
.card:nth-child(3):hover {164
background-color: #ffb5d2;165
}166
167
.card:nth-child(4):hover {168
background-color: #7baaf0;169
}170
171
172
.card:nth-child(5):hover {173
animation: backgroundIMG .1s;174
animation-fill-mode: forwards;175
}176
177
178
@keyframes backgroundIMG {179
100% {180
background-image: linear-gradient(#2096a3,#088981,#00DDEB);181
}182
}183
184
.card:nth-child(6):hover {185
background-color: #8c9eff;186
}187
.card:nth-child(7):hover {188
background-color: rgb(153, 131, 131);189
}190
.card:nth-child(8):hover {191
background-color: #6fc5ed;192
}193
194
195
.card:nth-child(9):hover {196
background-color: rgb(255,69,0);197
}198
199
.card:nth-child(9) .youtube > g circle {200
fill: rgb(255,69,0);201
}202
203
.card:nth-child(9) .youtube > g path {204
fill: white;205
}206
207
.text {208
position: absolute;209
font-size: 0.7em;210
transition: .4s ease-in-out;211
color: black;212
text-align: center;213
font-weight: bold;214
letter-spacing: 0.33em;215
z-index: 3;216
}main.js
1
/* Replace with your JS Code 2
(Leave empty if not needed) */3
