/* Initial button styling */
.new-button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: transparent;
  color: #3E8500; /* Text color */
  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 */
.new-button .top-left,
.new-button .top-right,
.new-button .bottom-left,
.new-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 */
.new-button .top-left {
  top: 0;
  left: 0;
  border-top: 2px solid #3E8500; /* Border color */
  border-left: 2px solid #3E8500; /* Border color */
}

/* L-shaped top-right corner */
.new-button .top-right {
  top: 0;
  right: 0;
  border-top: 2px solid #3E8500; /* Border color */
  border-right: 2px solid #3E8500; /* Border color */
}

/* L-shaped bottom-left corner */
.new-button .bottom-left {
  bottom: 0;
  left: 0;
  border-bottom: 2px solid #3E8500; /* Border color */
  border-left: 2px solid #3E8500; /* Border color */
}

/* L-shaped bottom-right corner */
.new-button .bottom-right {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid #3E8500; /* Border color */
  border-right: 2px solid #3E8500; /* Border color */
}

/* Hover effect: expand the L-shaped corners without changing text color */
.new-button:hover {
  color: #3E8500; /* Keep the original text color on hover */
}

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