.animated-border {
  position: relative;
  border: none;
  /* background-color: #000000;
  color: white;
  font-size: 16px; */
  cursor: pointer;
  outline: none;
}

/* Üst çizgi  -------------------------------------------------------------*/
.animated-border::before {
  content: '';
  position: absolute;
  /*height: 1px; /* Çizgi kalınlığı */
  width: 0;
  /*background-color: aqua;*/
  border-top: 1px solid aqua; /* Üst çizgi kalınlığı ve rengi */
  transition: width 0.2s; /* Animasyon süresi */
}
.animated-border::before {
  top: 0;
  left: 0;
}
.animated-border:hover::before {
  width: 100%;
  transition-delay: 0s; /* Üst çizgi animasyon başlangıç süresi */
} /* Üst çizgi */

/* Alt çizgi  -------------------------------------------------------------*/
.animated-border::after {
  content: '';
  position: absolute;
  /*height: 1px; /* Çizgi kalınlığı */
  width: 0;
  /*background-color: aqua;*/
  border-top: 1px solid aqua; /* Üst çizgi kalınlığı ve rengi */
  transition: width 0.2s; /* Animasyon süresi */
}
.animated-border::after {
  bottom: 0;
  right: 0;
}
.animated-border:hover::after {
  width: 100%;
  transition-delay: 0.1s; /* Alt çizgi animasyon başlangıç süresi */
} /* Alt çizgi */

/* Sağ çizgi  -------------------------------------------------------------*/
.animated-border span::before {
  content: '';
  position: absolute;
  height: 0;
  border-right: 1.34px solid aqua; /* Sağ çizgi kalınlığı ve rengi */
  transition: height 0.2s; /* Animasyon süresi */
}
.animated-border span::before {
  top: 0;
  right: 0;
}
.animated-border:hover span::before {
  height: 100%;
  transition-delay: 0.1s; /* Sağ çizgi animasyon başlangıç süresi */
} /* Sağ çizgi */

/* sol çizgi -------------------------------------------------------------*/
.animated-border span::after {
  content: '';
  position: absolute;
  /*width: 5px; /* Çizgi kalınlığı */
  height: 0;
  /*background-color: aqua; */
  border-top: 1px solid aqua; /* Üst çizgi kalınlığı ve rengi */
  transition: height 0.5s; /* Animasyon süresi */
}
.animated-border span::after {
  bottom: 0;
  right: 0;
}
.animated-border:hover span::after {
  height: 0; /* Sol çizgi animasyonu kapalı */
} /* sol çizgi */