CSS Battle #3 – Push Button

[Narigo]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source  – <strong>score {character count}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {character count}

your cssbattles code here!

---

Solution with radial-gradient

<div></div>
<style>
  body {
    background: #6592CF;
    display: grid;
    place-items: center;
  }
  div {
    background: radial-gradient(#EEB850 25px, #243D83 0 75px, #6592CF 0 125px, #243D83 0) 0 50% / 300px 300px;
    height: 150px;
    width: 300px;
  }
</style>

[aishwarya-mali]

Solution with before & after

<div></div>
<style>
 body{
   background: #6592CF;
   display: grid;
   place-items: center;
 }
 div {
   width: 300px;
   height: 150px;
   background: #243D83;
   position: relative;
 }
 div::after, div::before{
    content: '';
   position: absolute;
   border-radius: 50%;
 }
 div::after{
   inset: -50px 25px;
   border: 50px solid #6592CF;
 }
 div::before{
   inset: 50px 125px;
   background: #EEB850;
 }
</style>

[danieltott]

This is the best I've done on this one, using border-radius and outline: ** 665.4 (190 chars)**

Unminified

<div>
<style>
* {
  background: #6592cf;
}
body {
  background: #243d83;
  margin: 75 50;
  padding: 50 125;
}
div {
  width: 50;
  height: 50;
  background: #eeb850;
  border-radius: 25vw;
  outline: 53Q solid #6592cf;
  outline-offset: 53Q;
}

Minified

<div><style>*{background:#6592CF}body{background:#243D83;margin:75 50;padding:50 125}div{width:50;height:50;background:#EEB850;border-radius:25vw;outline:53q solid #6592CF;outline-offset:53q

[Narigo]

radial-gradient seems to be less chars (155 chars):

Minified version of the solution

<p><style>body{background:#6592CF;margin:75 50}p{background:radial-gradient(#EEB850 25px,#243D83 0 75px,#6592CF 0 125px,#243D83 0)50%/100%200%;height:100%}

[danieltott]

Yes! @Narigo I saw your post after I posted mine, was able to steal yours and get it down to 139 chars:

Code Source

<style>*{background:#6592CF}*>*{margin:75 50;background:0 50%/100% 75vw radial-gradient(#EEB850 25px,#243D83 0 75px,#6592CF 0 59%,#243D83 0

[AdrianneManneyzPR]

The Saturday edition started with puzzle 1 and has progressed to puzzle 3. One of the solutions for the puzzle involves using radial-gradient.

[meg-gutshall]

Just a circle on a rectangle – 604.45 {472}

<div class="rectangle"></div>
<div class="circle"></div>
<style>
  body {
    margin: 0;
    background: #6592CF;
  }
  div { position: relative; }
  .rectangle {
    width: 300px;
    height: 150px;
    top: 75px;
    left: 50px;
    background: #243D83;
  }
  .circle {
    width: 50px;
    height: 50px;
    bottom: 75px;
    left: 125px;
    background: #EEB850;
    border: solid 50px #243D83;
    border-radius: 100%;
    box-shadow: 0 0 0 50px #6592CF;
  }
</style>

Refactored using no HTML elements – 641.79 {237}

<style>*>*{margin:75 125;background:radial-gradient(circle,#EEB850 25px,#243D83 0 75px,#6592CF 0 125px,transparent 0),linear-gradient(90deg,#6592CF 53q,transparent 0 350px,#6592CF 0),linear-gradient(#6592CF 75px,#243D83 0 225px,#6592CF 0