1.6K views
1.social-links,.flex-center { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5} 6 7.social-btn { 8 cursor: pointer; 9 height: 50px; 10 width: 50px; 11 font-family: 'Titillium Web', sans-serif; 12 color: #333; 13 border-radius: 10px; 14 box-shadow: 0px 10px 10px rgba(0,0,0,0.1); 15 background: white; 16 margin: 5px; 17 transition: 0.3s; 18 justify-content: center; 19} 20 21.social-btn svg { 22 height: 24px; 23 width: 24px; 24} 25 26.social-btn span { 27 width: 0px; 28 overflow: hidden; 29 transition: 0.3s; 30 text-align: center; 31 margin-left: 5px; 32} 33 34.social-btn:hover { 35 width: 150px; 36 border-radius: 5px; 37} 38 39.social-btn:hover span { 40 padding: 2px; 41 width: 80px; 42} 43 44#twitter svg { 45 fill: #1da1f2; 46} 47 48#linkedin svg { 49 fill: #0e76a8; 50} 51 52#github { 53 fill: #333; 54} 55
MIT License