15K views
CSSAdd prefixes
1.cssbuttons-io-button { 2 background: #A370F0; 3 color: white; 4 font-family: inherit; 5 padding: 0.35em; 6 padding-left: 1.2em; 7 font-size: 17px; 8 font-weight: 500; 9 border-radius: 0.9em; 10 border: none; 11 letter-spacing: 0.05em; 12 display: flex; 13 align-items: center; 14 box-shadow: inset 0 0 1.6em -0.6em #714da6; 15 overflow: hidden; 16 position: relative; 17 height: 2.8em; 18 padding-right: 3.3em; 19} 20 21.cssbuttons-io-button .icon { 22 background: white; 23 margin-left: 1em; 24 position: absolute; 25 display: flex; 26 align-items: center; 27 justify-content: center; 28 height: 2.2em; 29 width: 2.2em; 30 border-radius: 0.7em; 31 box-shadow: 0.1em 0.1em 0.6em 0.2em #7b52b9; 32 right: 0.3em; 33 transition: all 0.3s; 34} 35 36.cssbuttons-io-button:hover .icon { 37 width: calc(100% - 0.6em); 38} 39 40.cssbuttons-io-button .icon svg { 41 width: 1.1em; 42 transition: transform 0.3s; 43 color: #7b52b9; 44} 45 46.cssbuttons-io-button:hover .icon svg { 47 transform: translateX(0.1em); 48} 49 50.cssbuttons-io-button:active .icon { 51 transform: scale(0.95); 52} 53
HTML
1<button class="cssbuttons-io-button"> Get started 2 <div class="icon"> 3 <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="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"></path></svg> 4 </div> 5</button>