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>

Comments

[DucTuanmdt]

At the solution 3, the margin-collapsing mechanism is the reason leads to the issue you met, with overflow: hidden, it will prevent margin-collapsing, so it's working as expected.
I have other solution: just using a div tag and take advantage of it pseudo ::after to create the circle inside it:

<div></div>
<style>
  body {
    background: #6592CF;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div {
    width: 300px;
    height: 150px;
    position: relative;
    background: #243D83;
  }
  div::after {
    content: '';
    width: 50px;
    height: 50px;
    position: absolute;
    background: #EEB850;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 50px #243D83, 0 0 0 100px #6592CF;
  }

[Chetan]

Earlier I thought the only way to the center is to use flexbox or grid I learned the margin thing works too
and I was confused between the use of relative and position but now all doubts cleared here. Border kind of pain as I usually forget border-style: solid and then I scratch my head.
Nevertheless great work from Olzhas. You help real people learn!

<div class="container">
  <div>

  </div>
  <div>

  </div>
    <div>

  </div>
</div>
<style>
  body{
    background:#6592CF;
        display: grid;
        justify-content: center;
        align-content: center;
  }
  .container{
      position: relative;
      height:150px; 
      width:300px;
      background:#243D83;
  }
  .container>div{
    left:50%;
      top:50%;
      transform: translate(-50%, -50%);
      position: absolute;
  }

  .container > div:first-child {        

      border-color: #EEB850;
      border-radius: 50%;
      border-width: 25px;
      z-index:3;

      border-style: solid;
    }
      .container > div:nth-child(2) {        
      border-color: #243D83;
      border-radius: 50%;
      border-width: 75px;
      border-style: solid;
      z-index:2;
    }

      .container > div:nth-child(3) {        
      border-color: #6592CF;
      border-radius: 50%;
      border-width: 125px;
      border-style: solid;
        z-index:1;
    }

</style>

[kiranojhanp]

We can use combination of outline and border to achieve this

<div></div>
<style>
  body{
    background:#6592CF;
    display:grid;
    place-items:center;
    overflow: hidden;
 }
  div {
    width: 78%;
    height: 150px;
    background: #243D83;
    display: grid;
    place-items: center;
  }
  div::after{
    content: '';
    aspect-ratio: 1;
    width: 50px;
    outline: solid 50px #6592CF;
    border: solid 50px #243D83;
    background: #EEB850;
    border-radius: 50%;
  }
</style>

[Wiltel492019]

Wow amazing!!! Button!!!War Won!!! It's a Battle Ground and then a PlayGround!!! Pick your Computer Programming Language Instruments Wisely!!!
Dreamweaver HTML CSS JavaScript.
[e-mail]...C#
AAS ITI MICHIGAN

[rabbit]

Hi, I do not fully understand "overflow: hidden" behavior, but here is a solution (a very long one though) which doesn't make use of overflow:

<div id=rectangle>
  <div id=circle />
</div>

* {
  margin:0;
  background:#6592cf;
}
  
#rectangle {
  width:300;
  height:150;
  background:#243d83;
  margin:75 auto
}
  
#circle {
  width:50;
  height:50;
  background:#eeb850;
  border-radius:50px;
  box-shadow:
    0 0 0 50px #243d83,
    0 0 0 100px #6592cf;
  margin:0 auto;
  position:relative;
  top:50;
}