.pokeball { position: relative; transition:transform 1s; border-radius:100%; width: 160px; height: 160px; overflow: hidden; background: white; color: black; box-shadow: 0 0 0 1px currentColor inset; } .pokeball::before { content: ""; position: absolute; height: 50%; width: 100%; display: block; background: currentColor; } .pokeball::after { content: ""; position: absolute; height: 25%; width: 25%; background: white; border: 1px solid currentColor; box-sizing: border-box; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 100px; z-index: 1; background: white; box-shadow: 0px 0px 0px 1px white,0px 0px 0px 2px currentColor; } .pokeball:hover { transform:rotate(360deg); }