Button by vinodjangid07
#e8e8e8
1.print-btn { 2 width: 100px; 3 height: 45px; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7 background-color: white; 8 border: 1px solid rgb(213, 213, 213); 9 border-radius: 10px; 10 gap: 10px; 11 font-size: 16px; 12 cursor: pointer; 13 overflow: hidden; 14 font-weight: 500; 15 box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.065); 16 transition: all 0.3s; 17} 18.printer-wrapper { 19 display: flex; 20 flex-direction: column; 21 align-items: center; 22 justify-content: center; 23 width: 20px; 24 height: 100%; 25} 26.printer-container { 27 height: 50%; 28 width: 100%; 29 display: flex; 30 align-items: flex-end; 31 justify-content: center; 32} 33 34.printer-container svg { 35 width: 100%; 36 height: auto; 37 transform: translateY(4px); 38} 39.printer-page-wrapper { 40 width: 100%; 41 height: 50%; 42 display: flex; 43 align-items: flex-start; 44 justify-content: center; 45} 46.printer-page { 47 width: 70%; 48 height: 10px; 49 border: 1px solid black; 50 background-color: white; 51 transform: translateY(0px); 52 transition: all 0.3s; 53 transform-origin: top; 54} 55.print-btn:hover .printer-page { 56 height: 16px; 57 background-color: rgb(239, 239, 239); 58} 59.print-btn:hover { 60 background-color: rgb(239, 239, 239); 61} 62
488 views
488 views
MIT License