Button by vinodjangid07
#e8e8e8
1.open-file { 2 background-color: rgb(255, 255, 255); 3 width: 140px; 4 height: 45px; 5 display: flex; 6 align-items: center; 7 justify-content: center; 8 gap: 20px; 9 border: 1px solid rgb(217, 217, 217); 10 font-size: 15px; 11 cursor: pointer; 12 transition: all 0.3s; 13 border-radius: 10px; 14} 15.file-wrapper { 16 width: 15px; 17 height: auto; 18 display: flex; 19 align-items: flex-end; 20 justify-content: center; 21 position: relative; 22} 23.file-wrapper svg { 24 width: 100%; 25} 26.file-front { 27 position: absolute; 28 width: 100%; 29 height: 70%; 30 border: 2px solid rgb(0, 0, 0); 31 border-bottom: 1px solid black; 32 transform: skewX(-40deg); 33 transform-origin: bottom right; 34 background-color: white; 35 transition: all 0.5s; 36 bottom: 0; 37} 38.open-file:hover .file-front { 39 height: 50%; 40 transform-origin: bottom right; 41 transform: skewX(-55deg); 42} 43.open-file:hover { 44 box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.048); 45} 46
554 views
554 views
MIT License