.btn {
    margin: 20px;
    background: rgb(45, 68, 97);
    color: #fff;
    border: 1px rgb(45, 68, 97) solid;
    font-size: 14px;
    padding: 20px 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow: hidden;
    position: relative;
  }
  
  .btn:focus {
      outline: none;
  }
  
  .btn .circle {
     position: absolute;
     background-color: #fff;
     width: 100px;
     height: 100px; 
     border-radius: 50%;
     transform: translate(-50%, -50%) scale(0);
     animation: scale 0.5s ease-out;
  }
  
  @keyframes scale {
      to {
          transform: translate(-50%, -50%) scale(3);  
          opacity: 0;
      }
  }

  .btn-restart {
      background-color: rgb(184 182 203);
      border: 1px solid rgb(184 182 203);
  }

  .btn-start:hover,
  .btn-restart:hover {
      cursor: pointer;
  }

  .btn-start:active,
  .btn-restart:active {
      transform: scale(0.96);
  }