Button by satyamchaudharydev
#e8e8e8
1/* inspired from this svgbackgrounds.com/ */ 2.button { 3 width: fit-content; 4 display: flex; 5 padding: 0.8em 1.1em; 6 gap: 0.4rem; 7 border: none; 8 font-weight: bold; 9 border-radius: 30px; 10 cursor: pointer; 11 text-shadow: 2px 2px 3px rgb(136 0 136 / 50%); 12 background: linear-gradient( 13 15deg, 14 #880088, 15 #aa2068, 16 #cc3f47, 17 #de6f3d, 18 #f09f33, 19 #de6f3d, 20 #cc3f47, 21 #aa2068, 22 #880088 23 ) 24 no-repeat; 25 background-size: 300%; 26 background-position: left center; 27 transition: background 0.3s ease; 28 color: #fff; 29} 30 31.button:hover { 32 background-size: 320%; 33 background-position: right center; 34} 35 36.button:hover svg { 37 fill: #fff; 38} 39 40.button svg { 41 width: 23px; 42 fill: #f09f33; 43 transition: 0.3s ease; 44} 45
6.8K views
6.8K views
MIT License