Button by aguerquin
#212121
1.button-icon { 2 display: flex; 3 border: 3px #fff solid; 4 width: fit-content; 5 height: fit-content; 6 cursor: pointer; 7} 8 9.icon { 10 background-color: #fff; 11 padding: 10px 10px 5px 10px; 12} 13 14.icon svg { 15 width: 25px; 16 height: 25px; 17} 18 19.cube { 20 transition: all 0.4s; 21 transform-style: preserve-3d; 22 width: 200px; 23 height: 20px; 24} 25 26.button-icon:hover { 27 border-color: #ff98a2; 28} 29 30.button-icon:hover .cube { 31 transform: rotateX(90deg); 32} 33 34.side { 35 position: absolute; 36 height: 47px; 37 width: 200px; 38 display: flex; 39 font-size: 0.8em; 40 justify-content: center; 41 align-items: center; 42 text-transform: uppercase; 43 letter-spacing: 0.5px; 44 font-weight: bold; 45} 46 47.top { 48 background: #ff98a2; 49 color: #fff; 50 transform: rotateX(-90deg) translate3d(0, 13.5px, 2em); 51} 52 53.front { 54 background: #222229; 55 color: #fff; 56 transform: translate3d(0, 0, 1em); 57} 58
1.9K views
1.9K views
MIT License