Button by devkatyall
#e8e8e8
1.cssbuttons-io { 2 position: relative; 3 font-family: inherit; 4 font-weight: 600; 5 font-size: 17px; 6 border-radius: 0.8em; 7 cursor: pointer; 8 border: none; 9 background: linear-gradient(to right, #00bf63, #5ce1e6); 10 color: ghostwhite; 11 overflow: hidden; 12} 13 14.cssbuttons-io svg { 15 width: 1.2em; 16 height: 1.2em; 17 margin-left: 0.7em; 18 stroke-width: 2px; 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 0.9em 0.8em 1.02em; 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
302 views
Variation of abutton
MIT License