Button by Admin12121
#e8e8e8
1.printer { 2 --border: #00104b; 3 --background: #fff; 4 cursor: pointer; 5 width: 32px; 6 height: 18px; 7 position: relative; 8} 9 10.printer:before, .printer:after { 11 content: ""; 12 position: absolute; 13 box-shadow: inset 0 0 0 2px var(--border); 14 background: var(--background); 15} 16 17.printer:before { 18 left: 0; 19 right: 0; 20 bottom: 0; 21 height: 14px; 22 border-radius: 3px; 23 z-index: 2; 24} 25 26.printer:after { 27 width: 26px; 28 height: 6px; 29 top: 0; 30 left: 3px; 31 border-radius: 3px 3px 0 0; 32} 33 34.printer .dot { 35 width: 24px; 36 height: 2px; 37 border-radius: 1px; 38 left: 4px; 39 bottom: 4px; 40 z-index: 4; 41 position: absolute; 42 background: var(--border); 43} 44 45.printer .dot:before, .printer .dot:after { 46 content: ""; 47 position: absolute; 48 background: var(--border); 49 border-radius: 1px; 50 height: 2px; 51} 52 53.printer .dot:before { 54 width: 2px; 55 right: 0; 56 top: -5px; 57} 58 59.printer .dot:after { 60 width: 4px; 61 right: 3px; 62 top: -5px; 63} 64 65.printer .paper { 66 position: absolute; 67 z-index: 1; 68 width: 18px; 69 height: 20px; 70 border-radius: 2px; 71 box-shadow: inset 0 0 0 2px var(--border); 72 background: var(--background); 73 left: 7px; 74 bottom: 10px; 75 display: flex; 76 justify-content: center; 77 transform: perspective(40px) translateY(0) rotateX(4deg) translateZ(0); 78 -webkit-animation: paper 1.2s ease infinite; 79 animation: paper 1.2s ease infinite; 80 -webkit-animation-play-state: var(--state, running); 81 animation-play-state: var(--state, running); 82} 83 84.printer .paper .svg { 85 display: block; 86 width: 8px; 87 height: 8px; 88 margin-top: 4px; 89} 90 91.printer .output { 92 width: 32px; 93 height: 24px; 94 pointer-events: none; 95 top: 13px; 96 left: 0; 97 z-index: 3; 98 overflow: hidden; 99 position: absolute; 100} 101 102.printer .output .paper-out { 103 position: absolute; 104 z-index: 1; 105 width: 18px; 106 height: 20px; 107 border-radius: 2px; 108 box-shadow: inset 0 0 0 2px var(--border); 109 background: var(--background); 110 left: 7px; 111 bottom: 0; 112 transform: perspective(40px) rotateX(40deg) translateY(-12px) translateZ(6px); 113 -webkit-animation: paper-out 1.2s ease infinite; 114 animation: paper-out 1.2s ease infinite; 115 -webkit-animation-play-state: var(--state, running); 116 animation-play-state: var(--state, running); 117} 118 119.printer .output .paper-out:before { 120 content: ""; 121 position: absolute; 122 left: 3px; 123 top: 4px; 124 right: 3px; 125 height: 2px; 126 border-radius: 1px; 127 opacity: 0.5; 128 background: var(--border); 129 box-shadow: 0 3px 0 var(--border), 0 6px 0 var(--border); 130} 131 132.printer:not(:hover) { 133 --state: paused; 134} 135 136@-webkit-keyframes paper { 137 50% { 138 transform: translateY(10px) translateZ(0); 139 } 140} 141 142@keyframes paper { 143 50% { 144 transform: translateY(10px) translateZ(0); 145 } 146} 147 148@-webkit-keyframes paper-out { 149 50% { 150 transform: perspective(40px) rotateX(30deg) translateY(-4px) translateZ(6px); 151 } 152} 153 154@keyframes paper-out { 155 50% { 156 transform: perspective(40px) rotateX(30deg) translateY(-4px) translateZ(6px); 157 } 158} 159
675 views
675 views
MIT License