CSS Battle #3 - Push Button
Tags: html, css, webdev, tutorial
Published: 2019-06-14 09:26:33

At the latest, while I was battling through [the third target][1] I wished myself guidance. Sure, there are GitHub repositories like [this one][2], 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][3]. There are, of course, also [other ways to center things][4]. 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.

```css
<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][4].
There were times, when [w3schools were bad][5], but these days are gone. I often visit the site when I want a more beginner-friendly explanation of something. So [here][6] 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.

```css
<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.

![The essence of programming](https://pics.me.me/my-code-doesnt-work-i-have-no-idea-why-my-21449922.png)

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.

```css
<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>
```

[1]: https://cssbattle.dev/play/3
[2]: https://github.com/alexzaworski/cssbattle-solutions
[3]: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
[4]: https://css-tricks.com/centering-css-complete-guide/
[5]: https://www.w3fools.com/
[6]: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp