Button by Saiyed-Tanvir
#212121
1.btn { 2 transform-style: preserve-3d; 3 perspective: 1000px; 4} 5 6.sides { 7 transition: all 0.07s; 8 cursor: pointer; 9} 10 11.top { 12 background: linear-gradient(259.35deg, #FF6B00 0%, #BD00FF 100%); 13 height: 2cm; 14 width: 4cm; 15 transform: rotateX(60deg); 16 font-weight: bolder; 17 padding: 0.5cm 1cm; 18 color: white; 19} 20 21.front { 22 background: linear-gradient(280.65deg, #BD5000 0%, #8C00BD 100%); 23 height: 2cm; 24 width: 4cm; 25 transform: translateY(-38px) rotateX(-60deg); 26} 27 28.btn:active .top { 29 transform: rotateX(60deg) translateZ(0px); 30} 31 32.btn:active .front { 33 height: 0.1cm; 34 transform: rotateX(-60deg) translateZ(-26px); 35}
975 views
975 views
MIT License