Card by ahmed150up
#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: #f09433; 39 background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 40 background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 41 background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 42 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 ); 43 animation: bounce_613 0.4s linear; 44} 45 46.card .social-link2:hover { 47 background-color: #00ccff; 48 animation: bounce_613 0.4s linear; 49} 50 51.card .social-link3:hover { 52 background-color: #5865f2; 53 animation: bounce_613 0.4s linear; 54} 55 56.card .social-link4:hover { 57 background-color: #12a50b; 58 animation: bounce_613 0.4s linear; 59} 60 61@keyframes bounce_613 { 62 40% { 63 transform: scale(1.4); 64 } 65 66 60% { 67 transform: scale(0.8); 68 } 69 70 80% { 71 transform: scale(1.2); 72 } 73 74 100% { 75 transform: scale(1); 76 } 77}
5.9K views
5.9K views
Variations
21.6K views
MIT License