CSS Battle #3 - Push Button

At the latest, while I was battling through the third target I wished myself guidance. Sure, there are GitHub repositories like this one, but they only give you the shortest possible answer without any hints whatsoever. This is how an idea was born to write this series.

1. Absolute Positioning

First things first. Let's style the body and give it a margin of 0 and a background color of choice. So far so good. Now to make a rectangle in the middle of our 400x300 canvas we can make a div of needed size 300x150 and center it with the usage of margins. In case of width 400 - 300 = 2x width resulting in 50px and height 300 - 150 = 2y being 75px. Then we color its background and voilà - we have something!

Now we have a choice. There are three circles. We've marked two divisions up - outer and inner. So we are free to choose which one we are giving a border as a third circle for. For me, it's the outer one. So we give it 50px solid border of light blue and set its width and height and border-radius to the same value (because it has a border) to get a circle. Next thing is to center it inside of the rectangle. Clearly, it is bigger than it. So we want to have the circle to be not within but over the rectangle. We give the outer circle an absolute position and center it as described here. There are, of course, also other ways to center things. Note that here adding position: relative to rect as the immediate parent of outer makes the circle follow the center of the rectangle. If you would move the rectangle by playing around with its margins you will notice the effect. Without this relative position, the outer circle will always stay at the center of the whole canvas, which only in this case coincides to be the center of the rectangle. Another noteworthy thing is overflow: hidden which in this case doesn't seem to have an effect because the border of the outer circle has the same color as the background.

The inner circle is a piece of cake. We give it a background, width, height, and center it.

<div id="rect">
  <div id="outer">
    <div id="inner"></div>
  </div>
</div>

<style>
  body {
    margin:0;
    background: #6592CF;
  }
  #rect {
    margin: 75px 50px;
    width: 300px;
    height: 150px;
    background: #243D83;
    overflow: hidden;
    position: relative;
  }
  #outer {
    border: 50px solid #6592CF;
    border-radius: 150px;
    width: 150px;
    height: 150px;
    background: #243D83;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #inner {
    border-radius: 25px;
    width: 50px;
    height: 50px;
    background: #EEB850;
    margin: 50px auto;
  }
</style>

2. Box Shadows

Let's begin with the rectangle. It looks very similar to the previous example but has a default positioning and margins adjusted with the consideration of browser default. In order to center the circle inside of our rectangle, let's use the flexbox as described here.
There were times, when w3schools were bad, but these days are gone. I often visit the site when I want a more beginner-friendly explanation of something. So here we learn we can do multiple shadows for an element using box-shadow. We create a yellow circle and center it. Then we add two shadows differing in size and color. Note that the order of shadows is important since every next shadow is put behind the existing ones.

<div id="rect">
    <div id="circle"></div>
</div>

<style>
  * {
    background: #6592CF;
  }
  #rect {
    margin: 75px 42px;
    width: 300px;
    height: 150px;
    background: #243D83;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #circle {
    border-radius: 25px;
    width: 50px;
    height: 50px;
    background: #EEB850;
    margin: 50px auto;
    box-shadow: 0 0 0 50px #243D83, 0 0 0 100px #6592CF;
  }
</style>

3. Box Shadows 2.0

You probably know this.

This is exactly how I feel. I don't understand overflow: hidden - the code will not work without it and I don't know why.

<div id="rect">
    <div id="circle"></div>
</div>

<style>
  * {
    background: #6592CF;
  }
  #rect {
    margin: 75px 42px;
    width: 300px;
    height: 150px;
    background: #243D83;
    overflow: hidden;
  }
  #circle {
    border-radius: 25px;
    width: 50px;
    height: 50px;
    background: #EEB850;
    margin: 50px auto;
    box-shadow: 0 0 0 50px #243D83, 0 0 0 100px #6592CF;
  }
</style>