9.3K 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: 16px; 7 padding: 0.7em 1.4em 0.7em 1.1em; 8 color: white; 9 background: #ad5389; 10 background: linear-gradient(0deg, rgba(20,167,62,1) 0%, rgba(102,247,113,1) 100%); 11 border: none; 12 box-shadow: 0 0.7em 1.5em -0.5em #14a73e98; 13 letter-spacing: 0.05em; 14 border-radius: 20em; 15} 16 17.cssbuttons-io-button svg { 18 margin-right: 6px; 19} 20 21.cssbuttons-io-button:hover { 22 box-shadow: 0 0.5em 1.5em -0.5em #14a73e98; 23} 24 25.cssbuttons-io-button:active { 26 box-shadow: 0 0.3em 1em -0.5em #14a73e98; 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="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"></path></svg> 3 <span>Add</span> 4</button>