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