html渐变按钮,CSS按钮渐变动画

css

:root {

--font: 1rem/1.2 "helvetica", sans-serif;

--bg-hover: linear-gradient(

135deg,

#101ee7 0%,

#2654e9 20%,

#62d6fa 37%,

#fff 50%,

#fc35ca 66%,

#7559ff 72%,

#101ee7 100%

);

--btn-color: #2e175e;

}

/* formating */

main {

display: flex;

width: 100%;

height: 100vh;

align-items: center;

justify-content: center;

}

/* button */

.btn {

display: table;

text-align: center;

color: #ffffff;

text-decoration: none;

position: relative;

font: var(--font);

font-weight: bold;

padding: 22px 40px;

background-color: var(--btn-color);

overflow: hidden;

margin: 24px;

}

.--animated {

transition: all 1s;

}

.--animated span {

position: relative;

z-index: 9;

}

.--animated:after {

height: 100%;

width: 2000px;

transition: all 1s;

background: var(--bg-hover);

}

.--animated:before {

height: 26px;

width: 100%;

top: -50px;

z-index: 10;

opacity: 0;

background-color: rgba(255, 255, 255, 0.15);

}

.--animated:hover:before {

top: 0;

opacity: 1;

}

.--animated:hover:after {

left: -1750px;

}

.--animated:before,

a:after {

position: absolute;

top: 0;

left: 0;

z-index: 7;

display: block;

content: "";

}

.--animated:active:before {

height: 100%;

background-color: rgba(255, 255, 255, 0.8);

}

.--animated:active {

transform: scale(0.95);

transition: all 200ms;

}

body{background-color: #191919}