Button by adamgiebl
#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 cursor: pointer; 9 border: none; 10 background: linear-gradient(to right, #8e2de2, #4a00e0); 11 color: ghostwhite; 12 overflow: hidden; 13} 14 15.cssbuttons-io svg { 16 width: 1.2em; 17 height: 1.2em; 18 margin-right: 0.5em; 19} 20 21.cssbuttons-io span { 22 position: relative; 23 z-index: 10; 24 transition: color 0.4s; 25 display: inline-flex; 26 align-items: center; 27 padding: 0.8em 1.2em 0.8em 1.05em; 28} 29 30.cssbuttons-io::before, 31.cssbuttons-io::after { 32 position: absolute; 33 top: 0; 34 left: 0; 35 width: 100%; 36 height: 100%; 37 z-index: 0; 38} 39 40.cssbuttons-io::before { 41 content: ""; 42 background: #000; 43 width: 120%; 44 left: -10%; 45 transform: skew(30deg); 46 transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1); 47} 48 49.cssbuttons-io:hover::before { 50 transform: translate3d(100%, 0, 0); 51} 52 53.cssbuttons-io:active { 54 transform: scale(0.95); 55} 56
22K views
22K views
Variations
2276 views
MIT License