< Back to Frontend Friday Folks Index

Push Button

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (659 characters)
1 
<div class="bg-rect">
2 
<div class="blue-circle"></div>
3 
<div class="button"></div>
4 
</div>
5 
<style>
6 
  body {
7 
    margin: 0;
8 
    background: #6592CF;
9 
  }
10 
  .bg-rect {
11 
    position: absolute;
12 
    top: 75px;
13 
    bottom: 75px;
14 
    left: 50px;
15 
    right: 50px;
16 
    background: #243D83;
17 
    overflow: hidden;
18 
  }
19 
  .blue-circle {
20 
    border: 50px solid #6592CF;
21 
    border-radius: 50%;
22 
    position: absolute;
23 
    left: 25px;
24 
    right: 25px;
25 
    top: -50px;
26 
    bottom: -50px;
27 
  }
28 
  .button {
29 
    position: absolute;
30 
    border-radius: 50%;
31 
    background: #EEB850;
32 
    top: 50%;
33 
    left: 50%;
34 
    width: 50px;
35 
    height: 50px;
36 
    translate: -50% -50%;
37 
  }
38 
</style>
My first solution when we started playing these CSS battles. Instead of using two inner divs, this could have been done with ::before and ::after pseudo elements - but I didn't know them too well back then.
Highlighted solution (270 characters)
1 
<div></div>
2 
<style>
3 
  body {
4 
    background: #6592CF;
5 
    display: grid;
6 
    place-items: center;
7 
  }
8 
  div {
9 
    background: radial-gradient(#EEB850 25px, #243D83 0 75px, #6592CF 0 125px, #243D83 0) 0 50% / 300px 300px;
10 
    height: 150px;
11 
    width: 300px;
12 
  }
13 
</style>
Gradients! This has been done when the Saturday edition of the Frontend Friday Folks started over from the beginning. I joined this time and tried solving it again in a different way. Using a radial-gradient and moving the background position seemed to make sense to me.
< Back to Frontend Friday Folks Index