CSS LINEAR-GRADIENT BUTTON ANIMATION

THE CSS PART DESING AS SHORT VIDEO IN SMALL WIDTH. YOU CAN CHANGE YOUR SELF CSS PART

Html part

CSS part

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    min-height: 100vh;
    background: #333;
    margin-left: 200px;
    margin-top: 100px;
    overflow: hidden;
}
.btn{
    width: 200px;
    height: 60px;
    border: none;
    outline: none;
    font-size: 40px;
    font-family: sans-serif;
    background: #c38b8b;
    color: #fff;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;

}
.btn::before{
    position: absolute;
    content: "";
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    left: -2px;
    top: -2px;
    background: linear-gradient(
        124deg,
        #ff2400,
        #381d1d,
        #e8b71d,
        #e3e81e,
        #1de840,
        #1ddde8,
        #2b1de8,
        #dd00f3,
        #dd00f3
    );
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    animation: animate 20s 
    linear infinite;
    opacity: 0;
    transition:
     opacity .3s ease-in-out;
     border-radius: 10px;
}
.btn:hover::before{
    opacity: 1;
}
.btn::after{
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #555273;
    left: 0;
    top: 0;
    border-radius: 10px;
}
@keyframes animate{
    0%{
        background-position: 0 0 ;

}
    50%{
        background-position: 400% 0;

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

CodeWithCreativity

Search This Blog