动画边框按钮

效果图

JS

import styles from './style.less'
const index = () =>
{
    
    
    return (
        <div className={
    
    styles.container}>
            <a href="#" className={
    
    styles.SidebarCreate}>
                <span>Hello World</span>
            </a>
        </div>
    );
};
export default index

CSS

.container {
    
    
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: pink;

  a {
    
    
    text-decoration: none;
  }

  .SidebarCreate {
    
    
    width: 180px;
    text-align: center;
    position: relative;
    border-radius: 6px;
    box-sizing: border-box;
    color: red;
    display: block;
    z-index: 2;
    overflow: hidden;
    padding: 3px;
  }

  .SidebarCreate::before {
    
    
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
    background-size: 50% 100%;
    animation: animated 1.5s ease alternate infinite;
  }

  .SidebarCreate span {
    
    
    position: relative;
    z-index: 2;
    padding: 0.875rem 0;
    font-size: 1.1rem;
    align-items: center;
    background: #000;
    border-radius: 3px;
    display: block;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
  }

  @keyframes animated {
    
    
    0% {
    
    
      background-position: 0% 0%;
    }

    100% {
    
    
      background-position: 100% 100%;
    }
  }
}