DEV Community

Discussion on: CSS Battle #3 - Push Button

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