#e8e8e8
1.card { 2 width: fit-content; 3 height: fit-content; 4 background-color: rgb(238, 238, 238); 5 display: flex; 6 align-items: center; 7 justify-content: center; 8 padding: 25px 25px; 9 gap: 20px; 10 box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055); 11} 12 13/* for all social containers*/ 14.socialContainer { 15 width: 52px; 16 height: 52px; 17 background-color: rgb(44, 44, 44); 18 display: flex; 19 align-items: center; 20 justify-content: center; 21 overflow: hidden; 22 transition-duration: .3s; 23} 24/* instagram*/ 25.containerOne:hover { 26 background-color: #d62976; 27 transition-duration: .3s; 28} 29/* twitter*/ 30.containerTwo:hover { 31 background-color: #00acee; 32 transition-duration: .3s; 33} 34/* linkdin*/ 35.containerThree:hover { 36 background-color: #0072b1; 37 transition-duration: .3s; 38} 39/* Whatsapp*/ 40.containerFour:hover { 41 background-color: #128C7E; 42 transition-duration: .3s; 43} 44 45.socialContainer:active { 46 transform: scale(0.9); 47 transition-duration: .3s; 48} 49 50.socialSvg { 51 width: 17px; 52} 53 54.socialSvg path { 55 fill: rgb(255, 255, 255); 56} 57 58.socialContainer:hover .socialSvg { 59 animation: slide-in-top 0.3s both; 60} 61 62@keyframes slide-in-top { 63 0% { 64 transform: translateY(-50px); 65 opacity: 0; 66 } 67 68 100% { 69 transform: translateY(0); 70 opacity: 1; 71 } 72} 73 74
8.3K views
8.3K views
Comments
Variations
3 MIT License