Button by Lokesh1379
#e8e8e8
1.parent { 2 width: 100%; 3 height: 100%; 4 display: flex; 5 justify-content: center; 6 align-items: center; 7} 8 9.child { 10 width: 50px; 11 height: 50px; 12 display: flex; 13 justify-content: center; 14 align-items: center; 15 transform-style: preserve-3d; 16 transition: all 0.5s ease-in-out; 17 border-radius: 50%; 18 margin: 0 5px; 19} 20 21.child:hover { 22 background-color: white; 23 background-position: -100px 100px, -100px 100px; 24 transform: rotate3d(0.5, 1, 0, 30deg); 25 transform: perspective(180px) rotateX(60deg) translateY(2px); 26 box-shadow: 0px 10px 10px rgb(1, 49, 182); 27} 28 29button { 30 border: none; 31 background-color: transparent; 32 font-size: 20px; 33} 34 35.button:hover { 36 width: inherit; 37 height: inherit; 38 display: flex; 39 justify-content: center; 40 align-items: center; 41 transform: translate3d(0px, 0px, 15px) perspective(180px) rotateX(-35deg) translateY(2px); 42 border-radius: 50%; 43}
2.4K views
2.4K views
MIT License