Button by Yaya12085
#212121
1.button { 2 width: fit-content; 3 display: flex; 4 padding: 1.2em 1rem; 5 cursor: pointer; 6 gap: 0.4rem; 7 font-weight: bold; 8 border-radius: 30px; 9 text-shadow: 2px 2px 3px rgb(136 0 136 / 50%); 10 background: linear-gradient(15deg, #880088, #aa2068, #cc3f47, #de6f3d, #f09f33, #de6f3d, #cc3f47, #aa2068, #880088) no-repeat; 11 background-size: 300%; 12 color: #fff; 13 border: none; 14 background-position: left center; 15 box-shadow: 0 30px 10px -20px rgba(0,0,0,.2); 16 transition: background .3s ease; 17} 18 19.button:hover { 20 background-size: 320%; 21 background-position: right center; 22} 23 24.button:hover svg { 25 fill: #fff; 26} 27 28.button svg { 29 width: 23px; 30 fill: #f09f33; 31 transition: .3s ease; 32}
5.3K views
5.3K views
MIT License