Z-index with font awesome icons is not working

I am using the font awesome icon to display on the button so that it appears as clicked but it is not visible completely.

I have used z-index for that but it doesn't work

If I use z-index: 0 or a higher value

If i use a z-index value below 0

function onClick(ele) {
  document.getElementById('status1').style.visibility = 'visible';
}

.sta_tus {
  font-size: 14pt;
  font-weight: 300;
  color: #005a84;
  background-color: #d5e2ed;
  border-radius: 0px;
  border: 2px solid deepskyblue;
  height: 60px;
  width: 150px;
  margin-right: 12px;
}

.fa-check-circle {
  right: 37px;
  position: relative;
  color: #00a2db;
  bottom: 33px;
}

<html>

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>

<body>

  <button type="button" class="btn btn-md sta_tus" onClick="onClick(this)">Just an Idea</button>
  <span id="status1" class="fa-stack fa-lg ">
                <i class="fas fa-check-circle" ></i>
              </span>
</body>

</html>

Any suggestions on this..

Thanks in advance.

Solution

Try to use background-color: #fff; on .fa-check-circle - it seems that the checkmark is transparent, which lets the border of the rectangle come trough underneath it.