4.1K views
1.btn { 2 --color1: #1a8516; 3 --color2: #236b19; 4 perspective: 1000px; 5 padding: 1em 1em; 6 background: linear-gradient(var(--color1), var(--color2)); 7 border: none; 8 outline: none; 9 font-size: 20px; 10 text-transform: uppercase; 11 letter-spacing: 4px; 12 color: #fff; 13 text-shadow: 0 10px 10px #000; 14 cursor: pointer; 15 transform: rotateX(70deg) rotateZ(30deg); 16 transform-style: preserve-3d; 17 transition: transform 0.5s; 18} 19 20.btn::before { 21 content: ""; 22 width: 100%; 23 height: 15px; 24 background-color: var(--color2); 25 position: absolute; 26 bottom: 0; 27 right: 0; 28 transform: rotateX(90deg); 29 transform-origin: bottom; 30} 31 32.btn::after { 33 content: ""; 34 width: 15px; 35 height: 100%; 36 background-color: var(--color1); 37 position: absolute; 38 top: 0; 39 right: 0; 40 transform: rotateY(-90deg); 41 transform-origin: right; 42} 43 44.btn:hover { 45 transform: rotateX(30deg) rotateZ(0); 46} 47
MIT License