#212121
1button { 2 --green: #1BFD9C; 3 font-size: 15px; 4 padding: 0.7em 2.7em; 5 letter-spacing: 0.06em; 6 position: relative; 7 font-family: inherit; 8 border-radius: 0.6em; 9 overflow: hidden; 10 transition: all 0.3s; 11 line-height: 1.4em; 12 border: 2px solid var(--green); 13 background: linear-gradient(to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%,transparent 60% , rgba(27, 253, 156, 0.1) 100%); 14 color: var(--green); 15 box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.4), 0 0 9px 3px rgba(27, 253, 156, 0.1); 16} 17 18button:hover { 19 color: #82ffc9; 20 box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.6), 0 0 9px 3px rgba(27, 253, 156, 0.2); 21} 22 23button:before { 24 content: ""; 25 position: absolute; 26 left: -4em; 27 width: 4em; 28 height: 100%; 29 top: 0; 30 transition: transform .4s ease-in-out; 31 background: linear-gradient(to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%,rgba(27, 253, 156, 0.1) 60% , transparent 100%); 32} 33 34button:hover:before { 35 transform: translateX(15em); 36}
25K views
25K views
Comments
Variations
1 MIT License