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