Selamlar, Frontendmentor sitesinde gördüğüm taş kağıt makas oyununu yapmayı deniyorum buton animasyonlarında bir hatamı fark ettim.
Hatamı açıklıyayım:
Normalde olması gereken, bir buton seçtiğimde resimdeki gibi (Sol taraftaki buton seçilmiş) seçilen butonun arkadasından daireler belirip yok oluyor.

Benim yaptığıma gelicek olursak

sadece bu butona özel o effect butonun üstünden başlıyor z-index değeri -1 olmasına rağmen diğer butonlarda böyle bir hata almıyorum.

Burada başlamasını istediğim gibi butonun arkasından başlıyor. 2 butonun kodları arasındaki tek fark

transform: translate(-50%, calc(125px / -4)); 
    /* Düzeltme 
        Bu satır yerine 
            left: calc(135px / 3); 
        bunu yazdım hem ortaladım hem sorunu çözdüm ama yinede hatanın mantığını anlayabilmiş değilim.
    */

bu satır.

Ben eğer bu satırı çıkartırsam düzgün çalışıyor ama o zamanda butonu ortayalamıyorum.

// Buton kodları

&.rock {
    top: calc(135px / -3);
    left: calc(135px / -3);
    background: hsl(349, 70%, 56%);
    box-shadow: 0 7px 0px hsl(349, 71%, 52%);
}

&.scissors {
    bottom: calc(135px / -3);
    left: 50%;
    transform: translate(-50%, calc(125px / -4));
    background: hsl(40, 84%, 53%);
    box-shadow: 0 7px 0 hsl(39, 89%, 49%);
}

&.paper {
    top: calc(135px / -3);
    right: calc(135px / -3);
    background: hsl(230, 89%, 65%);
    box-shadow: 0 7px 0px hsl(230, 89%, 62%);
}