lUser L

.btn {
   position: relative;
}

.btn:before {
    content: '';
    position: absolute;
    left: -25px;
    bottom: -30px;
    width: 30px;
    height: 30px;
    background: blue;
    transition: .8s ease;
    border-radius: 25px;
    z-index: -1;
}

.btn:hover:before {
}

<form id="form">
<div id="dii">
<input type="hidden" id="login" value="<? echo $login; ?>">
<button type="submit" id="" class="status"  value="1">1</button>
<button type="submit" id="" class="status"  value="2">2</button>
<button type="submit" id="" class="status"  value="3">3</button>
<button type="submit" id="" class="status"  value="4">4</button>
</div>
<div id="app" width="640" ></div>
</form>

$("#dii>button").on('click', function(e){
  e.preventDefault();
  var status = $(this).val();
  
  console.log(status);
  var login = document.getElementById('login').value;
    $.ajax({
  type: 'post',
  url: 'preload.php',
  data: {status: status, login: login},
  success: function(data){
  //alert("Ваше сообщение отпрвлено!");
      alert(data);
            $("#app").empty();
            $("#app").append(data);
  }
});
});

#button {
  color: green; 
 width: 250px;
 height: 60px;
}
 #button2 {
  color: green; 
 width: 250px;
 height: 60px;
}

 #button3 {
  color: green; 
 width: 250px;
 height: 60px;
}
 #button4 {
  color: green; 
 width: 250px;
 height: 60px;
}

.main_li {
    flex-shrink: 0;
}

.ll2 li:hover {
    text-decoration: underline;
    text-decoration-color: red;
}

$('body').on('click', '.btn', function(){
});