/* Initial button styling */
.button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: transparent;
  color: #fff;
  border: none; /* Remove default border */
  position: relative;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  overflow: hidden; /* Ensure corners are within the button */
  transition: all 0.3s ease;
}
 
/* L-shaped corners */
.button .top-left,
.button .top-right,
.button .bottom-left,
.button .bottom-right {
  content: '';
  position: absolute;
  width: 15px;  /* Set width of the L-shape corners */
  height: 15px; /* Set height of the L-shape corners */
  transition: all 0.3s ease;
}
 
/* L-shaped top-left corner */
.button .top-left {
  top: 0;
  left: 0;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}
 
/* L-shaped top-right corner */
.button .top-right {
  top: 0;
  right: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
 
/* L-shaped bottom-left corner */
.button .bottom-left {
  bottom: 0;
  left: 0;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
}
 
/* L-shaped bottom-right corner */
.button .bottom-right {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
}
 
/* Hover effect: expand the L-shaped corners to form a complete border */
.button:hover {
  color: #fff;
}

.button:hover .top-left,
.button:hover .top-right,
.button:hover .bottom-left,
.button:hover .bottom-right {
  width: 50%;  /* Expand to half the button width */
  height: 50%; /* Expand to half the button height */
}