Hey everyone,
I am back with the CSSBattle Series!
This one is over the Target#3 "Push Button" on CSSBattle
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;}
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 ofp
, I provided a radial gradient through which the inner yellow circle was made.
And thep
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.
Top comments (0)