#212121
1.card svg { 2 height: 25px; 3} 4 5.card { 6 position: relative; 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 background: #e7e7e7; 11 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 12 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 13 overflow: hidden; 14 height: 50px; 15 width: 200px; 16} 17 18.card::before, .card::after { 19 position: absolute; 20 display: flex; 21 align-items: center; 22 width: 50%; 23 height: 100%; 24 transition: 0.25s linear; 25 z-index: 1; 26} 27 28.card::before { 29 content: ""; 30 left: 0; 31 justify-content: flex-end; 32 background-color: #4d60b6; 33} 34 35.card::after { 36 content: ""; 37 right: 0; 38 justify-content: flex-start; 39 background-color: #4453a6; 40} 41 42.card:hover { 43 box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 44} 45 46.card:hover span { 47 opacity: 0; 48 z-index: -3; 49} 50 51.card:hover::before { 52 opacity: 0.5; 53 transform: translateY(-100%); 54} 55 56.card:hover::after { 57 opacity: 0.5; 58 transform: translateY(100%); 59} 60 61.card span { 62 position: absolute; 63 display: flex; 64 align-items: center; 65 justify-content: center; 66 width: 100%; 67 height: 100%; 68 color: whitesmoke; 69 font-family: 'Fira Mono', monospace; 70 font-size: 24px; 71 font-weight: 700; 72 opacity: 1; 73 transition: opacity 0.25s; 74 z-index: 2; 75} 76 77.card .social-link { 78 position: relative; 79 display: flex; 80 align-items: center; 81 justify-content: center; 82 width: 25%; 83 height: 100%; 84 color: whitesmoke; 85 font-size: 24px; 86 text-decoration: none; 87 transition: 0.25s; 88} 89 90.card .social-link svg { 91 text-shadow: 1px 1px rgba(31, 74, 121, 0.7); 92 transform: scale(1); 93} 94 95.card .social-link:hover { 96 background-color: rgba(249, 244, 255, 0.774); 97 animation: bounce_613 0.4s linear; 98} 99 100@keyframes bounce_613 { 101 40% { 102 transform: scale(1.4); 103 } 104 105 60% { 106 transform: scale(0.8); 107 } 108 109 80% { 110 transform: scale(1.2); 111 } 112 113 100% { 114 transform: scale(1); 115 } 116}
Comments
MIT License