10K views
CSSAdd prefixes
1.cssbuttons-io { 2 position: relative; 3 font-family: inherit; 4 font-weight: 500; 5 font-size: 18px; 6 letter-spacing: 0.05em; 7 border-radius: 0.8em; 8 border: none; 9 background: linear-gradient(to right, #8e2de2, #4a00e0); 10 color: ghostwhite; 11 overflow: hidden; 12} 13 14.cssbuttons-io svg { 15 width: 1.2em; 16 height: 1.2em; 17 margin-right: 0.5em; 18} 19 20.cssbuttons-io span { 21 position: relative; 22 z-index: 10; 23 transition: color 0.4s; 24 display: inline-flex; 25 align-items: center; 26 padding: 0.8em 1.2em 0.8em 1.05em; 27} 28 29.cssbuttons-io::before, 30.cssbuttons-io::after { 31 position: absolute; 32 top: 0; 33 left: 0; 34 width: 100%; 35 height: 100%; 36 z-index: 0; 37} 38 39.cssbuttons-io::before { 40 content: ""; 41 background: #000; 42 width: 120%; 43 left: -10%; 44 transform: skew(30deg); 45 transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1); 46} 47 48.cssbuttons-io:hover::before { 49 transform: translate3d(100%, 0, 0); 50} 51 52.cssbuttons-io:active { 53 transform: scale(0.95); 54} 55
HTML
1<button class="cssbuttons-io"> 2 <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M24 12l-5.657 5.657-1.414-1.414L21.172 12l-4.243-4.243 1.414-1.414L24 12zM2.828 12l4.243 4.243-1.414 1.414L0 12l5.657-5.657L7.07 7.757 2.828 12zm6.96 9H7.66l6.552-18h2.128L9.788 21z"></path></svg> Code</span> 3</button>