HTML Code:

I'm using Bootstrap for Column And Button

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<div class="container">
    <div class="row">
      <div class="col-3">
        <a href="https://www.deshamarbd.com/" class="btn link1">left</a>
      </div>
      <div class="col-3">
        <a href="https://www.deshamarbd.com/" class="btn link2">right</a>
      </div>
      <div class="col-3">
        <a href="" class="btn link3">top</a>
      </div>
      <div class="col-3">
        <a href="https://www.deshamarbd.com/" class="btn link4">bottom</a>
      </div>
    </div>

    <div class="row">
      <div class="col-3">
        <a href="https://www.deshamarbd.com/" class="btn link5">left top</a>
      </div>
      <div class="col-3">
        <a href="https://www.deshamarbd.com/" class="btn link6">right top</a>
      </div>
      <div class="col-3">
        <a href="https://www.deshamarbd.com/" class="btn link7">left bottom</a>
      </div>
      <div class="col-3">
        <a href="" class="btn link8">right bottom</a>
      </div>
    </div>

    <div class="row">
      <div class="col-6">
        <a href="https://www.deshamarbd.com/" class="btn link9">left right dubble</a>
      </div>
      <div class="col-6">
        <a href="https://www.deshamarbd.com/" class="btn link10">up down dubble</a>
      </div>
    </div>
  </div>

CSS Code:

*, html{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  margin: 20px auto;
}
.row {
  text-align: center;
}
a.btn{
  border: 1px solid #008ff8;
  margin-top: 20px;
  width: 100%;
}

.link1{
  position: relative;
}
.link1:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link1:hover:before{
  width: 100%;
}

.link2{
  position: relative;
}
.link2:before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link2:hover:before{
  width: 100%;
}

.link3{
  position: relative;
}
.link3:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link3:hover:before{
  height: 100%;
}

.link4{
  position: relative;
}
.link4:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link4:hover:before{
  height: 100%;
}

.link5{
  position: relative;
}
.link5:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 0%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link5:hover:before{
  width: 100%;
  height: 100%;
}

.link6{
  position: relative;
}
.link6:before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0%;
  height: 0%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link6:hover:before{
  width: 100%;
  height: 100%;
}


.link7{
  position: relative;
}
.link7:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 0%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link7:hover:before{
  width: 100%;
  height: 100%;
}


.link8{
  position: relative;
}
.link8:before{
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0%;
  height: 0%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link8:hover:before{
  width: 100%;
  height: 100%;
}


.link9{
  position: relative;
}
.link9:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link9:hover:before{
  width: 100%;
}
.link9:after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0%;
  height: 100%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link9:hover:after{
  width: 100%;
}


.link10{
  position: relative;
}
.link10:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link10:hover:before{
  height: 100%;
}
.link10:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background-color: #008ff8;
  opacity: .2;
  transition: .5s;
}
.link10:hover:after{
  height: 100%;
}

Preview