G.re.g.orym.je.nson.5@gmail.com

General
1

Please see this fiddle:

Initially, the lines that form the outline of the button extend slightly past their intersection on the top-left & bottom-right.

On hover, this should transform so the extensions are from the top-right & bottom-left.

The bottom part works. The top is correct initially, but when transformed, it appears at an angle. What can I do to fix?

.custom-button {
  font-size: clamp(0.875rem, 2vw, 1rem);
  /* 14px base, responsive */
  padding: 10px 30px;
  color: var(--heading-color);
  border: 1px solid;
  font-weight: 600;
  text-transform: capitalize;
  display: inline-block;
  position: relative;
  transition: all 0.5s ease 0s;
  background: transparent;
  white-space: nowrap;
  line-height: normal;
  color: #4A83A5 !important;
  border-color: #4A83A5 !important;
  font-family: var(--font-raleway);
  text-decoration: none !important;
}

.custom-button:hover,
.custom-button:focus {
  color: #fff !important;
  background-color: #4A83A5 !important;
  text-decoration: none !important;
  outline: none;
}

.custom-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-100%, -100%);
  -webkit-transform: translate(-100%, -100%);
  border: solid;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  transition: all .7s ease-out;
  border-color: inherit;
}

.custom-button:hover:before {
  left: 100%;
  transform: translate(0, -100%) rotate(45deg);
  -webkit-transform: translate(0, -100%) rotate(45deg);
}

.custom-button:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(100%, 100%) rotate(0deg);
  -webkit-transform: translate(100%, 100%) rotate(0deg);
  border: solid;
  border-width: 1px 0 0 1px;
  display: inline-block;
  padding: 3px;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  transition: all .7s ease-out;
  border-color: inherit;
}

.custom-button:hover:after {
  right: 100%;
  transform: translate(0, 100%) rotate(90deg);
  -webkit-transform: translate(0, 100%) rotate(90deg);
}

.custom-button.cta-button {
  border-width: 1px;
  padding: 10px 30px 10px 30px;
}

.custom-button.cta-button:before {
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.custom-button.cta-button:after {
  border-top-width: 1px;
  border-left-width: 1px;
}

<a class="custom-button font-raleway cta-button" href="/donate">DONATE</a>
2

You’re almost there — the issue is with how you’re using rotate(45deg) on the :before pseudo-element during hover. When you rotate an L-shaped border (which is what you’re creating), it tilts diagonally, which is why the top-left corner ends up angled instead of staying clean and straight.

What’s going wrong:

  • You’re using transform: rotate(45deg) on an element with border-width on two sides.
  • That rotates the entire element, causing the straight corner to become slanted.

The bottom-right corner (:after) works because:

  • You’re rotating it 90°, which maintains the L shape without skewing the angles.

The Fix:

To keep the top-right corner clean on hover, don’t rotate it 45°. Instead, just move it — like you do for the bottom-right one.

So replace this:

.custom-button:hover:before {
  left: 100%;
  transform: translate(0, -100%) rotate(45deg);
}

With this:

.custom-button:hover:before {
  left: 100%;
  transform: translate(0, -100%);
}

This way, it shifts cleanly from the top-left to the top-right without skewing or rotating the line.

Optional Tweaks

If you want to reverse the direction of the border (so it still looks like a corner from the other side), you can change which sides have border width during hover — but rotation should be avoided if you want sharp corners.

Let me know if you want help animating the border sides differently depending on hover direction.