Black & White

<style>
    .ui-black-white-button {
        background-color: white;
        border:black 2px solid;
        border-radius: 25px;
        font-size:16px;
        font-weight: 600;
        padding:10px 20px;
        transition-duration: 200ms;
    }

    .ui-black-white-button:hover {
        background-color: black;
        color:white;
        transform: translateY(-4px);
    }

    .ui-black-white-button:active {
        transform: translateY(4px);
    }
</style>
<button class="ui-black-white-button">Press or Hover</button>

Plain Square

<style>
    .ui-plain-square-button {
        background-color: white;
        border:black 1px solid;
        font-size:16px;
        letter-spacing: 1px;
        padding:20px 40px;
        transition-duration: 200ms;
    }

    .ui-plain-square-button:hover {
        box-shadow: 0px 0px 20px gray;
        transform: scale(1.2);
    }

</style>
<button class="ui-plain-square-button">Hover</button>

⭐ Green Circle

White and Blue Double Buttons

<style>
    :root {
        --blue: rgb(0, 159, 187);
    }

    .ui-whiteButton {
        background-color: white;
        border: none;
        border-radius: 15px;
        color: rgb(90, 189, 255);
        font-size: 17px;
        font-weight: bold;
        height: 60px;
        position: absolute;
        rotate: 5deg;
        width: 190px;
    }

    .ui-whiteButton:hover {
        background-color: var(--blue);
        color: white;
        rotate: 0deg;
        transition: 0.2s linear;
    }

    .ui-whiteButtonContainer {
        background-color: var(--blue);
        border-radius: 15px;
        height: 60px;
        position: relative;
        rotate: -5deg;
        width: 195px;
    }

    .ui-whiteButtonContainer:hover {
        rotate: 0deg;
    }
</style>
<div style="width:fit-content;padding:20px; background-color:whitesmoke;">
    <div class="ui-whiteButtonContainer">
        <button class="ui-whiteButton">Hover</button>
    </div>
</div>

⭐ Keyboard