2K views
CSSAdd prefixes
1/* inspired from this svgbackgrounds.com/ */ 2.button { 3 width: fit-content; 4 display: flex; 5 padding: 0.6em 1.1em; 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 background-position: left center; 13 transition: background .3s ease; 14 color: #fff; 15} 16 17.button:hover { 18 background-size: 320%; 19 background-position: right center; 20} 21 22.button:hover svg { 23 fill: #fff; 24} 25 26.button svg { 27 width: 23px; 28 fill: #f09f33; 29 transition: .3s ease; 30}
HTML
1<button class="button"> 2 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24"> 3 <path d="m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z"></path> 4 </svg> 5 Unlock Pro 6</button>