Button by csozidev
#e8e8e8
1/* Cool share button made by: csozi | Website: english.csozi.hu*/ 2 3.buttons { 4 position: relative; 5 display: grid; 6 place-items: center; 7 height: fit-content; 8 width: fit-content; 9 transition: 0.3s; 10 border-radius: 50%; 11} 12 13.buttons:hover { 14 padding: 60px; 15} 16 17.buttons:hover .button { 18 box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff; 19} 20 21.main-button { 22 position: relative; 23 display: grid; 24 place-items: center; 25 padding: 10px; 26 border: none; 27 background: #e8e8e8; 28 box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff; 29 border-radius: 50%; 30 transition: 0.2s; 31 z-index: 100; 32} 33 34.button { 35 position: absolute; 36 display: grid; 37 place-items: center; 38 padding: 10px; 39 border: none; 40 background: #e8e8e8; 41 box-shadow: 5px 5px 12px rgba(202, 202, 202, 0), -5px -5px 12px rgba(255, 255, 255, 0); 42 transition: 0.3s; 43 border-radius: 50%; 44} 45 46.discord-button:hover { 47 background: #5865F2; 48} 49 50.buttons:hover .discord-button { 51 translate: 70px 0px; 52 box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff; 53} 54 55.twitter-button:hover { 56 background: #1CA1F1; 57} 58 59.buttons:hover .twitter-button { 60 translate: 47px -47px; 61 box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff; 62} 63 64.reddit-button:hover { 65 background: #FF4500; 66} 67 68.buttons:hover .reddit-button { 69 translate: 0px -70px; 70 box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff; 71} 72 73.messenger-button:hover { 74 background: #0093FF; 75} 76 77.buttons:hover .messenger-button { 78 translate: -47px -47px; 79 box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff; 80} 81 82.pinterest-button:hover { 83 background: #F0002A; 84} 85 86.buttons:hover .pinterest-button { 87 translate: -70px 0px; 88 box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff; 89} 90 91.instagram-button:hover { 92 background: #F914AF; 93} 94 95.buttons:hover .instagram-button { 96 translate: -47px 47px; 97 box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff; 98} 99 100.snapchat-button:hover { 101 background: #FFFC00; 102} 103 104.buttons:hover .snapchat-button { 105 translate: 0px 70px; 106 box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff; 107} 108 109.whatsapp-button:hover { 110 background: #25D366; 111} 112 113.buttons:hover .whatsapp-button { 114 translate: 47px 47px; 115 box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px #ffffff; 116}
3.3K views
3.3K views
MIT License