Button by gagan-gv
#e8e8e8
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 cursor: pointer; 13 z-index: 1; 14} 15 16.cube { 17 position: relative; 18 transition: all 0.5s; 19} 20 21.cube .bg-top { 22 position: absolute; 23 height: 10px; 24 background: #d4af37; 25 bottom: 100%; 26 left: 5px; 27 right: -5px; 28 transform: skew(-45deg, 0); 29 margin: 0; 30 transition: all 0.4s; 31} 32 33.cube .bg-top .bg-inner { 34 bottom: 0; 35} 36 37.cube .bg { 38 position: absolute; 39 left: 0; 40 bottom: 0; 41 top: 0; 42 right: 0; 43 background: #d4af37; 44 transition: all 0.4s; 45} 46 47.cube .bg-right { 48 position: absolute; 49 background: #d4af37; 50 top: -5px; 51 z-index: 0; 52 bottom: 5px; 53 width: 10px; 54 left: 100%; 55 transform: skew(0, -45deg); 56 transition: all 0.4s; 57} 58 59.cube .bg-right .bg-inner { 60 left: 0; 61} 62 63.cube .bg-inner { 64 background: #28282d; 65 position: absolute; 66 left: 2px; 67 right: 2px; 68 top: 2px; 69 bottom: 2px; 70} 71 72.cube .text { 73 position: relative; 74 transition: all 0.4s; 75} 76 77.cube:hover .bg-inner { 78 background: #d4af37; 79 transition: all 0.4s; 80} 81 82.cube:hover .text { 83 color: #28282d; 84 transition: all 0.4s; 85} 86 87.cube:hover .bg-right, 88.cube:hover .bg, 89.cube:hover .bg-top { 90 background: #28282d; 91} 92 93.cube:active { 94 z-index: 9999; 95 animation: bounce 0.1s linear; 96} 97 98@keyframes bounce { 99 50% { 100 transform: scale(0.9); 101 } 102} 103
9.9K views
9.9K views
MIT License