/* HTML */ <a href="#"><button class="button-18">Hover me</button></a> /* CSS */ .button-18 { --color: #560bad; font-family: inherit; display: inline-block; width: 8em; height: 2.6em; line-height: 2.5em; margin: 20px; position: relative; overflow: hidden; border: 2px solid var(--color); transition: color .5s; z-index: 1; font-size: 17px; border-radius: 6px; font-weight: 500; color: var(--color); } .button-18:before { content: ""; position: absolute; z-index: -1; background: var(--color); height: 150px; width: 200px; border-radius: 50%; } .button-18:hover { color: #fff; } .button-18:before { top: 100%; left: 100%; transition: all .7s; } .button-18:hover:before { top: -30px; left: -30px; } .button-18:active:before { background: #3a0ca3; transition: background 0s; }
0 Comments