Button by abbos97
#e8e8e8
1.moves-button { 2 padding: 10px 20px; 3 color: #000; 4 font-weight: 900; 5 border-radius: 4px; 6 font-size: 16px; 7 cursor: pointer; 8 position: relative; 9 overflow: hidden; 10 background-color: #fff; 11 border: 3px solid transparent; 12 border-image: linear-gradient(90deg, #f3f 20%, rgb(49, 18, 187) 60%); 13 border-image-slice: 1; 14} 15 16.moves-button::after { 17 content: 'Button'; 18 display: flex; 19 justify-content: center; 20 align-items: center; 21 position: absolute; 22 top: 0; 23 left: 100%; 24 width: 100%; 25 height: 100%; 26 background: linear-gradient(90deg, rgb(245, 108, 245) 20%, rgb(119, 91, 245) 60%); 27 transition: transform 0.3s ease-out; 28 pointer-events: none; 29 color: #fff; 30} 31 32.moves-button:hover::after { 33 transform: translateX(-100%); 34} 35 36.moves-button:focus { 37 outline: none; 38} 39 40/* Optional styling for the button on click */ 41.moves-button:active { 42 transform: translateY(2px); 43} 44
367 views
367 views
MIT License