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
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
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time π.
36,263Members
Resources
Similar Threads
Was this page helpful?
