5.8K views
1.btn { 2 display: block; 3 padding: 0.7em 1em; 4 background: transparent; 5 outline: none; 6 border: 0; 7 color: #d4af37; 8 letter-spacing: 0.1em; 9 font-family: monospace; 10 font-size: 17px; 11 font-weight: bold; 12 z-index: 1; 13} 14 15.cube { 16 position: relative; 17 transition: all 0.5s; 18} 19 20.cube .bg-top { 21 position: absolute; 22 height: 10px; 23 background: #d4af37; 24 bottom: 100%; 25 left: 5px; 26 right: -5px; 27 transform: skew(-45deg, 0); 28 margin: 0; 29 transition: all 0.4s; 30} 31 32.cube .bg-top .bg-inner { 33 bottom: 0; 34} 35 36.cube .bg { 37 position: absolute; 38 left: 0; 39 bottom: 0; 40 top: 0; 41 right: 0; 42 background: #d4af37; 43 transition: all 0.4s; 44} 45 46.cube .bg-right { 47 position: absolute; 48 background: #d4af37; 49 top: -5px; 50 z-index: 0; 51 bottom: 5px; 52 width: 10px; 53 left: 100%; 54 transform: skew(0, -45deg); 55 transition: all 0.4s; 56} 57 58.cube .bg-right .bg-inner { 59 left: 0; 60} 61 62.cube .bg-inner { 63 background: #28282d; 64 position: absolute; 65 left: 2px; 66 right: 2px; 67 top: 2px; 68 bottom: 2px; 69} 70 71.cube .text { 72 position: relative; 73 transition: all 0.4s; 74} 75 76.cube:hover .bg-inner { 77 background: #d4af37; 78 transition: all 0.4s; 79} 80 81.cube:hover .text { 82 color: #28282d; 83 transition: all 0.4s; 84} 85 86.cube:hover .bg-right, 87.cube:hover .bg, 88.cube:hover .bg-top { 89 background: #28282d; 90} 91 92.cube:active { 93 z-index: 9999; 94 animation: bounce .1s linear; 95} 96 97@keyframes bounce { 98 50% { 99 transform: scale(0.9); 100 } 101}
MIT License