先上效果图

本质：一个矩形在两个矩形互相重叠遮盖形成的缝隙中旋转形成，注意css属性z-index层级关系

直接上代码

  <div class="bg"><div class="button">按钮</div></div><style>.bg {width: 100%;height: 100vh;background-color: #000;display: flex;align-items: center;justify-content: center;}@keyframes run {0% {transform: rotate(0);}100% {transform: rotate(360deg);}}.button {width: 200px;height: 100px;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;  /* 关键属性 */color: #fff;z-index: 1;border-radius: 4px;}.button::before {content: "";width: 200%;height: 200%;  /* 调整此处宽高控制旋转边框的长度 */position: absolute;background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);z-index: -2;left: 50%;top: 50%;animation: run 1.5s linear infinite;transform-origin: left top;}.button::after {content: "";position: absolute;--w: 2px; /* 控制宽度 */width: calc(100% - 2 * var(--w));height: calc(100% - 2 * var(--w));left: var(--w);top: var(--w);background: #000;z-index: -1;border-radius: inherit;}</style>