* {
  box-sizing: border-box;
}

.btn {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  width: 400px; height: 324px;
  transform: scale(.5, .5);
}

.top {
  position: relative;
  left: 40px;
  z-index: 1;
  cursor: pointer;
  
  &:hover {
    .top-top {
      top: 52px;
      
      &:before {
        height: 0;
      }
      
      &:after {
        height: 0;
      }
    }
  }
}

.top-top {
  display: block;
  position: relative;
  top: 0;
  border-radius: 50%;
  border: solid 24px #000;
  width: 320px; height: 180px;
  background: #E53935;
  z-index: 1;
  transition: all .2s ease-in-out;
  
  &:before {
    display: block;
    position: absolute;
    left: -24px; top: 50%;
    width: 24px; height: 48px;
    content: '';
    background: #000;
    transition: height .2s ease-in-out;
  }
  
  &:after {
    display: block;
    position: absolute;
    right: -24px; top: 50%;
    width: 24px; height: 48px;
    content: '';
    background: #000;
    transition: height .2s ease-in-out;
  }
}

.top-bottom {
  display: block;
  position: absolute;
  top: 52px;
  border-radius: 50%;
  border: solid 24px #000;
  width: 320px; height: 180px;
  background: #D32F2F;
}

.bottom {
  position: absolute;
  top: 48px;
  z-index: 0;
}

.bottom-top {
  display: block;
  position: relative;
  border-radius: 50%;
  border: solid 24px #000;
  width: 400px; height: 225px;
  background: #FDD835;
  z-index: 1;
  
  &:before {
    display: block;
    position: absolute;
    left: -24px; top: 50%;
    width: 24px; height: 52px;
    content: '';
    background: #000;
  }
  
  &:after {
    display: block;
    position: absolute;
    right: -24px; top: 50%;
    width: 24px; height: 52px;
    content: '';
    background: #000;
  }
}

.bottom-bottom {
  display: block;
  position: absolute;
  top: 52px;
  border-radius: 50%;
  border: solid 24px #000;
  width: 400px; height: 225px;
  background: #FBC02D;
}