Button by kamehame-ha
#e8e8e8
1/* 2 3This is actually the most neutral button desing of all time, 4fits everywhere no matter if it is dark or light mode, 5just change colors. 6I created original using tailwindCSS, here's classes: 7 8text-blue-500 bg-blue-500/10 border border-blue-500 rounded-md px-2 py-[2px] text-sm cursor-pointer flex shrink-0 9text-yellow-500 bg-yellow-500/10 border border-yellow-500 rounded-md px-2 py-[2px] text-sm cursor-pointer flex shrink-0 10text-green-500 bg-green-500/10 border border-green-500 rounded-md px-2 py-[2px] text-sm cursor-pointer flex shrink-0 11text-indigo-500 bg-indigo-500/10 border border-indigo-500 rounded-md px-2 py-[2px] text-sm cursor-pointer flex shrink-0 12 13*/ 14 15.badges { 16 display: flex; 17 flex-direction: column; 18 gap: 1rem; /* 16px */ 19 align-items: center; 20 flex-wrap: wrap; 21 justify-content: center; 22} 23 24.badges > button { 25 font-size: 0.875rem; /* 14px */ 26 line-height: 1.25rem; /* 20px */ 27 padding: 2px .5rem; /* 8px*/ 28 cursor: pointer; 29 border: none; 30 border-radius: 0.375rem; /* 6px */ 31 outline: none; 32} 33 34.badges .blue { 35 background-color: rgba(59, 130, 246, 0.10); 36 color: rgb(59 130 246); 37 border: 1px rgb(59 130 246) solid; 38} 39 40.badges .yellow { 41 background-color: rgba(234, 179, 8, 0.10); 42 color: rgb(234 179 8); 43 border: 1px rgb(234 179 8) solid; 44} 45 46.badges .green { 47 background-color: rgba(34, 197, 94, 0.10); 48 color: rgb(34 197 94); 49 border: 1px rgb(34 197 94) solid; 50} 51 52.badges .red { 53 background-color: rgba(239, 68, 68, 0.10); 54 color: rgb(239 68 68); 55 border: 1px rgb(239 68 68) solid; 56}
1.2K views
1.2K views
MIT License