CSSBattle 16.95: Pokeball Solution

Approach

Background images: 1 for container, 1 for 2 half circles, 1 for button, 1 for thin body (small part behind button)

Result: 100% match

Implementation

1<style>
2  body {
3    background: radial-gradient(
4        35px circle at center,
5        #f6df96 25px,
6        #781728 0 35px,
7        transparent
8      ), radial-gradient(100px circle at center, transparent 100px, #6cb3a9),
9      linear-gradient(to bottom, #d25b70 140px, transparent 0 160px, #ffffff 0),
10      linear-gradient(to right, #6cb3a9 110px, #781728 0 290px, #6cb3a9 0);
11  }
12</style>

Other Battle #16 solutions

#89 - Summit

#90 - Eclipse

#91 - Reflection

#92 - Sequeeze

#93 - Great Wall

#94 - Ripples

#95 - Pokeball

#96 - Mandala

References

Original challenge