DEV Community

Prakhar Tandon
Prakhar Tandon

Posted on

CSSBattle Target#3

Hey everyone,
I am back with the CSSBattle Series!

This one is over the Target#3 "Push Button" on CSSBattle

Target3 Push Button

The best approach I could come up with is stated below

<p></p>
<style>
*{background:#6592CF;margin:37.5 25 37.5 25}
body{background:#243D83}
p{
position:fixed;
border-radius:50%;
background:radial-gradient(
#EEB850 24.5px,
#243D83 25.5px);
width:150;height:150;
left:50;top:-13;
border:50px solid #6592CF;}
Enter fullscreen mode Exit fullscreen mode

This one was by far, my shortest solution condensing to 237 characters.

Explanation

The p element is one with the dark blue color.
In the background colour of p , I provided a radial gradient through which the inner yellow circle was made.
And the p has a light-blue border of 50px thickness.

I was amazed to see that the top solution was just 108 characters, I wonder how they were able to do it in such small amount of code!!

Comment down your way of doing the same.
Stay Tuned for daily updates regarding all the challenges on CSSBattle.

Want to connect?

You can connect with me here

Discussion (0)