.custom-btn {
    margin-top: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    padding: 1em 2em;
    letter-spacing: 2px;
    font-weight: 700; 
    text-transform: uppercase;
    color: #fff;
    border-radius: 2px;

    border: 2px solid white;
    background: linear-gradient(182.66deg, rgba(255, 54, 54, 0.1) -18.06%, rgba(255, 255, 255, 0.1) 107.3%);
    border: 2.45px solid #FF0000;
    backdrop-filter: blur(9.81982px);
    cursor: pointer;
    transition: all 2.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}
 
.btn-3 {
  width: 160px;
  height: 42px;
  line-height: 42px;
  padding: 0;
  border: none;

}

.btn-3 a{
  text-decoration: none;
  color:#FF0000;
}

.btn-3 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-3:before,
.btn-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
   background: #FF0000;
  transition: all 0.3s ease;
}
.btn-3:before {
  height: 0%;
  width: 2px;
}
.btn-3:after {
  width: 0%;
  height: 2px;
}
.btn-3:hover{
   background: transparent;
  box-shadow: none;
}
.btn-3:hover:before {
  height: 100%;
}
.btn-3:hover:after {
  width: 100%;
}
.btn-3 span:hover{
   color: #FF0000;
}
.btn-3 span:before,
.btn-3 span:after {
    clip-path:polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
   background: #FF0000;
  transition: all 0.3s ease;
}
.btn-3 span:before {
  width: 2px;
  height: 0%;
}
.btn-3 span:after {
  width: 0%;
  height: 2px;
}
.btn-3 span:hover:before {
  height: 100%;
}
.btn-3 span:hover:after {
  width: 100%;
}