Card by ahmed150up2
#212121
1.card { 2 display: flex; 3 height: 70px; 4 width: 270px; 5} 6 7.card svg { 8 position: absolute; 9 display: flex; 10 width: 60%; 11 height: 100%; 12 font-size: 24px; 13 font-weight: 700; 14 opacity: 1; 15 transition: opacity 0.25s; 16 z-index: 2; 17 cursor: pointer; 18} 19 20.card .social-link1,.card .social-link2,.card .social-link3,.card .social-link4 { 21 position: relative; 22 display: flex; 23 align-items: center; 24 justify-content: center; 25 width: 25%; 26 color: whitesmoke; 27 font-size: 24px; 28 text-decoration: none; 29 transition: 0.25s; 30 border-radius: 50px; 31} 32 33.card svg { 34 transform: scale(1); 35} 36 37.card .social-link1:hover { 38 background-color: #1a1e22; 39 animation: bounce_613 0.4s linear; 40} 41 42.card .social-link2:hover { 43 background-color: #0a66c2; 44 animation: bounce_613 0.4s linear; 45} 46 47.card .social-link3:hover { 48 background-color: #0059f7; 49 animation: bounce_613 0.4s linear; 50} 51 52.card .social-link4:hover { 53 background-color: #1d4292; 54 animation: bounce_613 0.4s linear; 55} 56 57@keyframes bounce_613 { 58 40% { 59 transform: scale(1.4); 60 } 61 62 60% { 63 transform: scale(0.8); 64 } 65 66 80% { 67 transform: scale(1.2); 68 } 69 70 100% { 71 transform: scale(1); 72 } 73}
1.7K views
Variation of acard
MIT License