DEV Community

Cover image for CSS Battle #3 - Push Button

CSS Battle #3 - Push Button

Olzhas Askar on June 14, 2019

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 ...
Read full post
Collapse
 
ductuanmdt profile image
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;
  }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
chetanam profile image
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>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
kiranojhanp profile image
kiranojhanp • • Edited

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>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
wiltel492019 profile image
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.
Wiltel49@gmail.com...C#
AAS ITI MICHIGAN

Collapse
 
rabbit33 profile image
rabbit • • Edited

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