Button by vinodjangid07
#e8e8e8
1.Documents-btn { 2 display: flex; 3 align-items: center; 4 justify-content: flex-start; 5 width: fit-content; 6 height: 45px; 7 border: none; 8 padding: 0px 15px; 9 border-radius: 5px; 10 background-color: rgb(49, 49, 83); 11 gap: 10px; 12 cursor: pointer; 13 transition: all 0.3s; 14} 15.folderContainer { 16 width: 40px; 17 height: fit-content; 18 display: flex; 19 flex-direction: column; 20 align-items: center; 21 justify-content: flex-end; 22 position: relative; 23} 24.fileBack { 25 z-index: 1; 26 width: 80%; 27 height: auto; 28} 29.filePage { 30 width: 50%; 31 height: auto; 32 position: absolute; 33 z-index: 2; 34 transition: all 0.3s ease-out; 35} 36.fileFront { 37 width: 85%; 38 height: auto; 39 position: absolute; 40 z-index: 3; 41 opacity: 0.95; 42 transform-origin: bottom; 43 transition: all 0.3s ease-out; 44} 45.text { 46 color: white; 47 font-size: 14px; 48 font-weight: 600; 49 letter-spacing: 0.5px; 50} 51.Documents-btn:hover .filePage { 52 transform: translateY(-5px); 53} 54.Documents-btn:hover { 55 background-color: rgb(58, 58, 94); 56} 57.Documents-btn:active { 58 transform: scale(0.95); 59} 60.Documents-btn:hover .fileFront { 61 transform: rotateX(30deg); 62} 63
1.8K views
1.8K views
Variations
1 MIT License