Button by ahmedcome
#212121
1.button { 2 position: relative; 3 padding: 1em 7em; 4 transform: rotateX(40deg)rotateZ(40deg); 5 transform-style: preserve-3d; 6 border: .1em solid black; 7 transition: all 150ms; 8 background-color: rgb(233, 211, 184); 9 cursor: pointer; 10} 11 12.button::before { 13 content: ""; 14 position: absolute; 15 width: 2em; 16 height: 99%; 17 border: .1em solid black; 18 top: -.15em; 19 right: 0; 20 transform-origin: right; 21 transform: rotateY(-90deg); 22 transition: all 150ms; 23 background-color: rgb(155, 139, 120); 24} 25 26.button::after { 27 content: ""; 28 position: absolute; 29 width: 100%; 30 height: 2em; 31 border: .1em solid black; 32 bottom: 0; 33 left: -.15em; 34 transform-origin: bottom; 35 transform: rotateX(90deg); 36 transition: all 150ms; 37 background-color: rgb(199, 179, 155); 38} 39 40.button:active { 41 transform: rotateX(40deg)rotateZ(40deg) translateZ(-1em); 42} 43 44.button:active::before { 45 width: 0; 46} 47 48.button:active::after { 49 height: 0; 50} 51
1.7K views
Variation of abutton
Original Post
MIT License