如何修复CSS中a标签按钮的hover动画异常问题

问题说明 #

初始状态下，按钮左上角与右下角的线条有轻微延伸；hover时，延伸线条需切换至右上角与左下角。目前底部动画正常，顶部初始状态正确，但hover变换时顶部线条会呈现倾斜角度。

问题原因 #

顶部的:before伪元素初始状态未设置rotate属性，hover时突然添加rotate(45deg)，导致过渡过程中因旋转属性从无到有，出现倾斜变形。

修复方案 #

给初始状态的:before伪元素添加rotate(45deg)，让初始与hover状态保持一致的旋转角度，仅通过位置变换实现动画：

.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;
  /* 新增初始旋转角度，与hover状态保持一致 */
  transform: translate(-100%, -100%) rotate(45deg);
  -webkit-transform: translate(-100%, -100%) rotate(45deg);
  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%;
  /* 移除重复的rotate，仅保留位置变换 */
  transform: translate(0, -100%);
  -webkit-transform: translate(0, -100%);
}

.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;
}

效果说明 #

修改后，顶部线条在hover时仅会平移到右上角位置，保持原本的45度角，不会出现倾斜过渡的问题，和底部动画保持一致的流畅效果。

内容的提问来源于stack exchange，提问作者Karen K