Button by ahkamboh
#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 top , #8f1e8f, #4a00e0); 10 color: ghostwhite; 11 overflow: hidden; 12 cursor: pointer; 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 width: 100%; 34 height: 100%; 35 z-index: 1; 36} 37 38.cssbuttons-io::before { 39 content: ""; 40 background: rgb(0, 0, 0); 41 transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1); 42} 43 44.cssbuttons-io:hover::before { 45 transform: translate3d(0, -100%, 0); 46} 47 48
603 views
Variation of abutton
MIT License