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