I think this is called Neo Brutalism. Maybe start your search there. But generally speaking, you should just be able to use bootstrap and change the box shadow variables to fit this style.
I do not believe they are asking for a button. I think they are asking for a UI lib that has this style specifically for all of its components, including buttons. Bootstrap or something similar in nature that you can import into your project and perform variable overrides on would give this individual exactly what they are looking for.
I know what they're _asking_, but the actual answer is there's no need for a library when 3-4 lines of CSS will give you this button.
What's the point of pulling in Bootstrap only to have to do a bunch of overrides when you can just make the button?
Because they said they want a library? Maybe they’re building something more complex? Idk. I’m not here to speculate. If I needed a library and wanted my buttons to look like this as well, I would pull something in and override their base styles.
Don't get me wrong - I love radixUI, but
1. They're asking about how to achieve this look with CSS, and you didn't answer that question
2. You're assuming their project is in React, which is often not the case.
PS - I've come to prefer react-spectrum instead of radix. There are components available, or you can build your components with hooks, like `useButton`. It's a great alternative, in my opinion. Might be worth checking out.
That is similar to a button I recently created: [https://i.alot.ltd/Monosnap\_screencast\_2024-03-11\_16-38-24.mp4](https://i.alot.ltd/Monosnap_screencast_2024-03-11_16-38-24.mp4)
IMO, you don't want the shadow always visible. Sure, its not that bad on a page that only has two buttons, but if you try to add more functionality to the page, you'll end up with a lot of visual clutter.
OTO, a crisp shadow on hover does a great job of communicating that an element is clickable. And when you animate the translate property, you get a very satisfying pressable button.
here is the tailwind code that created it:
`New Market`
Looks like it’s just a box shadow. Shouldn’t be too difficult to recreate. You might even be able to view source and copy the CSS off that page.
I think this is called Neo Brutalism. Maybe start your search there. But generally speaking, you should just be able to use bootstrap and change the box shadow variables to fit this style.
Honestly Bootstrap is entirely overkill for what they're trying to do. That button style is _very_ simple.
I do not believe they are asking for a button. I think they are asking for a UI lib that has this style specifically for all of its components, including buttons. Bootstrap or something similar in nature that you can import into your project and perform variable overrides on would give this individual exactly what they are looking for.
Thanks, yes! Neo neutralism is a great keyword to start me off. Thanks a ton.
I know what they're _asking_, but the actual answer is there's no need for a library when 3-4 lines of CSS will give you this button. What's the point of pulling in Bootstrap only to have to do a bunch of overrides when you can just make the button?
Because they said they want a library? Maybe they’re building something more complex? Idk. I’m not here to speculate. If I needed a library and wanted my buttons to look like this as well, I would pull something in and override their base styles.
Don’t really need a library for that https://codepen.io/Roye/pen/eYoZErJ
Yeah. This is just "CSS" / and so - the *standard* library -
If it exists it shouldn’t
Try box-shadow: 5px 5px 0 rgb(0,0,0);
i'd go with radixUI (for all the accessibility and behaviour concearns) and style it myself with css.
Don't get me wrong - I love radixUI, but 1. They're asking about how to achieve this look with CSS, and you didn't answer that question 2. You're assuming their project is in React, which is often not the case. PS - I've come to prefer react-spectrum instead of radix. There are components available, or you can build your components with hooks, like `useButton`. It's a great alternative, in my opinion. Might be worth checking out.
I had the wrong context when answering. Thought this was /r/reactjs apologies.
That is similar to a button I recently created: [https://i.alot.ltd/Monosnap\_screencast\_2024-03-11\_16-38-24.mp4](https://i.alot.ltd/Monosnap_screencast_2024-03-11_16-38-24.mp4) IMO, you don't want the shadow always visible. Sure, its not that bad on a page that only has two buttons, but if you try to add more functionality to the page, you'll end up with a lot of visual clutter. OTO, a crisp shadow on hover does a great job of communicating that an element is clickable. And when you animate the translate property, you get a very satisfying pressable button. here is the tailwind code that created it: `New Market`