11K views
CSSAdd prefixes
1button { 2 --color: #560bad; 3 font-family: inherit; 4 display: inline-block; 5 width: 8em; 6 height: 2.6em; 7 line-height: 2.5em; 8 margin: 20px; 9 position: relative; 10 overflow: hidden; 11 border: 2px solid var(--color); 12 transition: color .5s; 13 z-index: 1; 14 font-size: 17px; 15 border-radius: 6px; 16 font-weight: 500; 17 color: var(--color); 18} 19 20button:before { 21 content: ""; 22 position: absolute; 23 z-index: -1; 24 background: var(--color); 25 height: 150px; 26 width: 200px; 27 border-radius: 50%; 28} 29 30button:hover { 31 color: #fff; 32} 33 34button:before { 35 top: 100%; 36 left: 100%; 37 transition: all .7s; 38} 39 40button:hover:before { 41 top: -30px; 42 left: -30px; 43} 44 45button:active:before { 46 background: #3a0ca3; 47 transition: background 0s; 48}
HTML
1<button> Hover me 2</button>