Bracket Frame Button

<!--
  Author: @samir-khan
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="bracket-btn">
  <span class="bracket-btn__corner bracket-btn__corner--tl"></span>
  <span class="bracket-btn__corner bracket-btn__corner--tr"></span>
  <span class="bracket-btn__corner bracket-btn__corner--bl"></span>
  <span class="bracket-btn__corner bracket-btn__corner--br"></span>
  <span>View Details</span>
</button>

/*
 * Author: @samir-khan
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.bracket-btn {
  position: relative;
  padding: 15px 34px;
  border: none;
  background: transparent;
  color: #e4e4e7;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.35s ease;
}
.bracket-btn:hover {
  background: rgba(255, 255, 255, 0.04);
}
.bracket-btn__corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #e4e4e7;
  border-style: solid;
  border-width: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bracket-btn__corner--tl { top: 6px; left: 6px; border-top-width: 2px; border-left-width: 2px; }
.bracket-btn__corner--tr { top: 6px; right: 6px; border-top-width: 2px; border-right-width: 2px; }
.bracket-btn__corner--bl { bottom: 6px; left: 6px; border-bottom-width: 2px; border-left-width: 2px; }
.bracket-btn__corner--br { bottom: 6px; right: 6px; border-bottom-width: 2px; border-right-width: 2px; }
.bracket-btn:hover .bracket-btn__corner--tl { top: 0; left: 0; }
.bracket-btn:hover .bracket-btn__corner--tr { top: 0; right: 0; }
.bracket-btn:hover .bracket-btn__corner--bl { bottom: 0; left: 0; }
.bracket-btn:hover .bracket-btn__corner--br { bottom: 0; right: 0; }