<div class="frame">
  <button class="custom-btn btn-1">Read More</button>
  <button class="custom-btn btn-2">Read More</button>
</div>

.frame {
  width: 90%;
  margin: 40px auto;
  text-align: center;
}
button {
  margin: 20px;
}
.custom-btn {
  color: #fff;
  width: 130px;
  height: 40px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

/* 1 */
.btn-1 {
  border: none;
  background-color: #ff9aff;
  box-shadow: 0 0 5px #ef97e8;
}
.btn-1:hover {
   box-shadow: 0 0 10px #ef97e8, 0 0 20px #ef97e8, 0 0 20px #fff inset;
}

/* 2 */
.btn-2 {
  color: #0bf4f3;
  border: 1px solid #0bf4f3;
  box-shadow:  0 0 5px #0bf4f3,  0 0 5px #0bf4f3 inset;
}
.btn-2:before {
  height: 0%;
  width: 2px;
}
.btn-2:hover {
  color: #fff;
  box-shadow: inset 0 0 10px #0bf4f3, 0 0 20px #0bf4f3 inset, 0 0 20px #0bf4f3 inset;
}