Button by ZAKARIAE48CHELLE
#e8e8e8
1.delete-button { 2 background-color: #000; 3 color: #fff; 4 font-size: 17px; 5 border: 0.5px solid rgba(0, 0, 0, 0.1); 6 padding-bottom: 8px; 7 width: 60px; 8 height: 65px; 9 border-radius: 15px 15px 12px 12px; 10 cursor: pointer; 11 position: relative; 12 will-change: transform; 13 transition: all 0.1s ease-in-out 0s; 14 user-select: none; 15 /* Add gradient shading to each side */ 16 background-image: linear-gradient( 17 to right, 18 rgba(0, 0, 0, 0.8), 19 rgba(0, 0, 0, 0) 20 ), 21 linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); 22 background-position: bottom right, bottom right; 23 background-size: 100% 100%, 100% 100%; 24 background-repeat: no-repeat; 25 box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4), 26 inset -4px -8px 0px rgba(0, 0, 0, 0.3), 0px 2px 1px rgba(0, 0, 0, 0.3), 27 0px 2px 1px rgba(255, 255, 255, 0.1); 28 transform: perspective(70px) rotateX(5deg) rotateY(0deg); 29} 30 31.delete-button::after { 32 content: ""; 33 position: absolute; 34 top: 0; 35 bottom: 0; 36 left: 0; 37 right: 0; 38 background-image: linear-gradient( 39 to bottom, 40 rgba(255, 255, 255, 0.2), 41 rgba(0, 0, 0, 0.5) 42 ); 43 z-index: -1; 44 border-radius: 15px; 45 box-shadow: inset 4px 0px 0px rgba(255, 255, 255, 0.1), 46 inset 4px -8px 0px rgba(0, 0, 0, 0.3); 47 transition: all 0.1s ease-in-out 0s; 48} 49 50.delete-button::before { 51 content: ""; 52 position: absolute; 53 top: 0; 54 bottom: 0; 55 left: 0; 56 right: 0; 57 background-image: linear-gradient( 58 to right, 59 rgba(0, 0, 0, 0.8), 60 rgba(0, 0, 0, 0) 61 ), 62 linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); 63 background-position: bottom right, bottom right; 64 background-size: 100% 100%, 100% 100%; 65 background-repeat: no-repeat; 66 z-index: -1; 67 border-radius: 15px; 68 transition: all 0.1s ease-in-out 0s; 69} 70 71.delete-button:active { 72 will-change: transform; 73 transform: perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) 74 scale(0.96); 75 height: 64px; 76 border: 0.25px solid rgba(0, 0, 0, 0.2); 77 box-shadow: inset -4px -8px 0px rgba(255, 255, 255, 0.2), 78 inset -4px -6px 0px rgba(0, 0, 0, 0.8), 0px 1px 0px rgba(0, 0, 0, 0.9), 79 0px 1px 0px rgba(255, 255, 255, 0.2); 80 transition: all 0.1s ease-in-out 0s; 81} 82 83.delete-button::after:active { 84 background-image: linear-gradient( 85 to bottom, 86 rgba(0, 0, 0, 0.5), 87 rgba(255, 255, 255, 0.2) 88 ); 89} 90 91.delete-button:active::before { 92 content: ""; 93 display: block; 94 position: absolute; 95 top: 5%; 96 left: 20%; 97 width: 50%; 98 height: 80%; 99 background-color: rgba(255, 255, 255, 0.1); 100 animation: overlay 0.1s ease-in-out 0s; 101 pointer-events: none; 102} 103 104@keyframes overlay { 105 from { 106 opacity: 0; 107 } 108 109 to { 110 opacity: 1; 111 } 112} 113 114.delete-button:focus { 115 outline: none; 116} 117
95 views
Variation of abutton
MIT License