#e8e8e8
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
Comments
Variations
1 MIT License