6.4K views
1button { 2 outline: none; 3 cursor: pointer; 4 border: none; 5 padding: 0.9rem 2rem; 6 margin: 0; 7 font-family: inherit; 8 font-size: inherit; 9 position: relative; 10 display: inline-block; 11 letter-spacing: 0.05rem; 12 font-weight: 700; 13 font-size: 17px; 14 border-radius: 500px; 15 overflow: hidden; 16 background: #66ff66; 17 color: ghostwhite; 18} 19 20button span { 21 position: relative; 22 z-index: 10; 23 transition: color 0.4s; 24} 25 26button:hover span { 27 color: black; 28} 29 30button::before, 31button::after { 32 position: absolute; 33 top: 0; 34 left: 0; 35 width: 100%; 36 height: 100%; 37 z-index: 0; 38} 39 40button::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 49button:hover::before { 50 transform: translate3d(100%, 0, 0); 51} 52
MIT License