Corner Draw

<div class="nuda-cdb-border">
  <span class="nuda-cdb-border__c nuda-cdb-border__c--tl"></span>
  <span class="nuda-cdb-border__c nuda-cdb-border__c--tr"></span>
  <span class="nuda-cdb-border__c nuda-cdb-border__c--bl"></span>
  <span class="nuda-cdb-border__c nuda-cdb-border__c--br"></span>
  <p class="nuda-cdb-border__content">Hover to Draw</p>
</div>

.nuda-cdb-border {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #141414;
  padding: 22px 40px;
  min-width: 170px;
  border-radius: 6px;
}

.nuda-cdb-border__c {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #e4ff54;
  border-style: solid;
  border-width: 0;
  transition: transform .35s ease;
}

.nuda-cdb-border__c--tl {
  top: 6px;
  left: 6px;
  border-width: 2px 0 0 2px;
  transform-origin: top left;
  transform: scale(0);
}

.nuda-cdb-border__c--tr {
  top: 6px;
  right: 6px;
  border-width: 2px 2px 0 0;
  transform-origin: top right;
  transform: scale(0);
}

.nuda-cdb-border__c--bl {
  bottom: 6px;
  left: 6px;
  border-width: 0 0 2px 2px;
  transform-origin: bottom left;
  transform: scale(0);
}

.nuda-cdb-border__c--br {
  bottom: 6px;
  right: 6px;
  border-width: 0 2px 2px 0;
  transform-origin: bottom right;
  transform: scale(0);
}

.nuda-cdb-border:hover .nuda-cdb-border__c {
  transform: scale(1);
}

.nuda-cdb-border__content {
  color: #cfcfcf;
  font-size: .85rem;
  margin: 0;
  font-family: monospace;
  letter-spacing: .04em;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cdb-border__c {
    transition: none;
    transform: scale(1);
  }
}