6.2K views
CSSAdd prefixes
1.cssbuttons-io-button { 2 display: flex; 3 align-items: center; 4 font-family: inherit; 5 font-weight: 500; 6 font-size: 17px; 7 padding: 0.8em 1.5em 0.8em 1.2em; 8 color: white; 9 background: #ad5389; 10 background: linear-gradient(0deg, rgba(77,54,208,1) 0%, rgba(132,116,254,1) 100%); 11 border: none; 12 box-shadow: 0 0.7em 1.5em -0.5em #4d36d0be; 13 letter-spacing: 0.05em; 14 border-radius: 20em; 15} 16 17.cssbuttons-io-button svg { 18 margin-right: 8px; 19} 20 21.cssbuttons-io-button:hover { 22 box-shadow: 0 0.5em 1.5em -0.5em #4d36d0be; 23} 24 25.cssbuttons-io-button:active { 26 box-shadow: 0 0.3em 1em -0.5em #4d36d0be; 27}
HTML
1<button class="cssbuttons-io-button"> 2 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M1 14.5a6.496 6.496 0 0 1 3.064-5.519 8.001 8.001 0 0 1 15.872 0 6.5 6.5 0 0 1-2.936 12L7 21c-3.356-.274-6-3.078-6-6.5zm15.848 4.487a4.5 4.5 0 0 0 2.03-8.309l-.807-.503-.12-.942a6.001 6.001 0 0 0-11.903 0l-.12.942-.805.503a4.5 4.5 0 0 0 2.029 8.309l.173.013h9.35l.173-.013zM13 12h3l-4 5-4-5h3V8h2v4z"></path></svg> 3 <span>Download</span> 4</button>