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