<form>
  <div class="form-element element-checkbox">
    <input type="checkbox" name="agree" id="agree" value="1" />
    <label for="agree">Я согласен с <a href="#">правилами сайта</a></label>
  </div>
  <div class="form-element element-submit">
    <button type="submit" disabled class="disabled">Регистрация</button>
  </div>
</form>
<div class="message message-success"><span>Вы успешно зарегистрированы!</span></div>
body {
  font: 16px Roboto;
  user-select: none;
}

form {
  margin:60px auto;
  width: 50%;
}

label, button {
  cursor: pointer;
}

.form-element {
  margin-bottom: 24px;
}

.element-submit {
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,.2);
}

button {
  font: 16px Roboto;
  padding: 12px;
  background: #2196f3;
  color: #fff;
  border-radius: 3px;
  outline: none;
  border: none;
}

button:disabled {
  opacity: .5;
  cursor: default;
}

.message {
  padding: 12px 24px;
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%); 
  border-radius: 24px;
  color: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  user-select: none;
}

.message-success {
  background: #4CAF50;
}
jQuery(document).ready(function($){
  $('#agree').on('change', function(){
    if($(this).is(':checked')){
      $('button[type="submit"]').prop('disabled', false);
    } else {
      $('button[type="submit"]').prop('disabled', true);
    }
  });
  
  $('form').on('submit', function(e){
    e.preventDefault();
    $('.message').stop().animate({
      'top': '50%'
    }, function(){
      setTimeout(function(){
        $('.message').animate({
          'top': '-100%'
        })
      }, 1000);
    })
  });
});

External CSS

  1. https://fonts.googleapis.com/css2?family=Roboto:wght@300&amp;display=swap

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js