Button by arshshaikh06
#212121
1#button-container { 2 position: relative; 3} 4 5.button { 6 position: absolute; 7 top: 50%; 8 left: 50%; 9 translate: -50% 50%; 10 background: #F4F7F5; 11 border: none; 12 border-radius: 25px; 13 height: 50px; 14 width: 50px; 15 color: white; 16 display: flex; 17 align-items: center; 18 justify-content: center; 19 transition: 0.3s ease-in; 20} 21 22#share { 23 color: #DC0654; 24 background: #fbe6ed; 25} 26 27#facebook { 28 background: linear-gradient(-160deg, #00D2FF, #3A7BD5); 29} 30 31#instagram { 32 background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCB045); 33} 34 35#dribbble { 36 background: linear-gradient(-70deg, #D70652, #FF025E); 37} 38 39#github { 40 background: linear-gradient(-70deg, #171515, #FF025E); 41} 42 43#youtube { 44 background: #FF0000; 45} 46 47#button-container:hover button { 48 rotate: 360deg; 49} 50 51#button-container:hover #share { 52 rotate: 270deg; 53} 54 55#button-container:hover > #facebook { 56 translate: -300% 50%; 57} 58 59#button-container:hover > #instagram { 60 translate: -226.78% -126.78%; 61} 62 63#button-container:hover > #dribbble { 64 translate: -50% -200%; 65} 66 67#button-container:hover > #github { 68 translate: 126.78% -126.78%; 69} 70 71#button-container:hover > #youtube { 72 translate: 200% 50%; 73}
1.1K views
1.1K views
MIT License