Button by Codecite
#e8e8e8
1.icon-conatiner { 2 width: 150px; 3 height: 150px; 4 display: flex; 5 flex-direction: column; 6 align-items: center; 7 justify-content: center; 8 background: #fff; 9 border-radius: 15px; 10 box-shadow: 20px 20px 15px 0 #ababab4d; 11 cursor: pointer; 12} 13 14.icon-conatiner svg { 15 width: 50px; 16 height: auto; 17} 18 19.icon-conatiner svg:last-child { 20 position: absolute; 21} 22 23.icon-conatiner:active { 24 animation: press 0.2s 1 linear; 25} 26 27.icon-conatiner:active svg:last-child { 28 animation: bounce 0.2s 1 linear; 29} 30 31.text { 32 color: #666; 33 font-family: sans-serif; 34 font-size: 16px; 35 font-weight: bold; 36 margin-top: 20px; 37 user-select: none; 38} 39 40@keyframes press { 41 0% { 42 transform: scale(1); 43 } 44 45 50% { 46 transform: scale(0.92); 47 } 48 49 to { 50 transform: scale(1); 51 } 52} 53 54@keyframes bounce { 55 50% { 56 transform: rotate(5deg) translate(20px, -50px); 57 } 58 59 to { 60 transform: scale(0.9) rotate(10deg) translate(50px, -80px); 61 opacity: 0; 62 } 63} 64
14K views
14K views
MIT License