Discussion on: CSS Battle #3 - Push Button

[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;
}