Button by yaasiinaxmed
#e8e8e8
1button { 2 --color: #0077ff; 3 font-family: inherit; 4 display: inline-block; 5 width: 6em; 6 height: 2.6em; 7 line-height: 2.5em; 8 overflow: hidden; 9 cursor: pointer; 10 margin: 20px; 11 font-size: 17px; 12 z-index: 1; 13 color: var(--color); 14 border: 2px solid var(--color); 15 border-radius: 6px; 16 position: relative; 17} 18 19button::before { 20 position: absolute; 21 content: ""; 22 background: var(--color); 23 width: 150px; 24 height: 200px; 25 z-index: -1; 26 border-radius: 50%; 27} 28 29button:hover { 30 color: white; 31} 32 33button:before { 34 top: 100%; 35 left: 100%; 36 transition: 0.3s all; 37} 38 39button:hover::before { 40 top: -30px; 41 left: -30px; 42} 43
11K views
11K views
Variations
4 MIT License