I made the Arc Raiders button in CSS but I'm not satisfied.
Hi all,
I have been looking forward for the release of Arc Raiders but last weekend I was able to play the Server slam and I knew beforehand I would enjoy the game but what I did not expect was for me to fall in love with their main button design (UI overhaul: https://x.com/ARCRaidersNews/status/1976409386173219084).
I was able to recreate it using CSS only, but I'm missing one more thing for it to be just perfect.
And that is the transparency between the border and the button itself.
Right now I'm faking it by making it the same color as the background, but if I were to place the button on top of an image, it would not work.
Are any of you wizards able to make the gap between the border transparent by using masking or clip-path?
I have my codepen here: https://codepen.io/RogerAntonio/pen/jEWxqYP
6 Replies
Which button is the "main button"? It looks to me that the pill button woud fit that description, but you already replicated it. The only difference is the color and text content.
"main button design" not "main button".
All the hover effects as shown in the UI overhaul link have the gradient effect.
No matter the shape or content of the button
This is what you mean right? Please just put a picture of what you're talking about in the post, makes it a lot easier to understand what you mean because that video shows lots of buttons
To me this looks like a good use of
outline but i don't know if you can put a gradient like that on it
It's similar to the nintendo switch focus ring
It looks like you already did it though right? So not sure what the question isThe gap between the button and the gradient border is supposed to be transparent so you can see the background through it.
Currently I fake this by making it the same color as the background. But this doesn't work on top of images or video.
Therefore I think it must use mask or clippath, which I can't wrap my head around.
Ah yeah that stuff is always annoying. It's probably easier to make the ring a different dom element from the main button. The ring is a few pixels bigger than the button and uses a border-image or something for the glow effect