Card by vinodjangid07
#e8e8e8
1.social-card { 2 height: fit-content; 3 width: fit-content; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7 gap: 20px; 8 background: rgb(255, 255, 255); 9 padding: 20px 25px; 10 border-radius: 14px; 11} 12.Btn { 13 width: 45px; 14 height: 45px; 15 display: flex; 16 align-items: center; 17 justify-content: center; 18 border: none; 19 background-color: transparent; 20 position: relative; 21 border-radius: 7px; 22 cursor: pointer; 23 transition: all 0.3s; 24} 25 26.svgContainer { 27 width: 100%; 28 height: 100%; 29 display: flex; 30 align-items: center; 31 justify-content: center; 32 background-color: transparent; 33 backdrop-filter: blur(0px); 34 letter-spacing: 0.8px; 35 border-radius: 10px; 36 transition: all 0.3s; 37 border: 1px solid rgba(156, 156, 156, 0.466); 38 z-index: 2; 39} 40 41.BG { 42 position: absolute; 43 width: 100%; 44 height: 100%; 45 background: #181818; 46 z-index: 1; 47 border-radius: 10px; 48 pointer-events: none; 49 transition: all 0.3s; 50 font-size: 0px; 51} 52.github .BG { 53 background: #181818; 54} 55.linkdin .BG { 56 background: #0077b5; 57} 58.whatsapp .BG { 59 background: #075e54; 60} 61.discord .BG { 62 background: #7289da; 63} 64.Btn:hover .BG { 65 transform: scale(1.5); 66 /* transform-origin: bottom; */ 67 font-size: 20px; 68 color: white; 69} 70 71.Btn:hover .svgContainer { 72 border: 1px solid rgba(216, 216, 216, 0.466); 73 background-color: rgba(209, 209, 209, 0.466); 74 backdrop-filter: blur(4px); 75} 76
1.1K views
1.1K views
MIT License