Hover Button css đẹp

 

## HTML

<div class="box-send-contact">

    <button class="button dark">Gửi thông tin</button>

</div>

## CSS

.button.dark {

    color: #fff;

    border-color: #0d2445;

}

.box-send-contact button {

    display: block;

    margin: 2rem auto 3rem auto;

}

.button:before {

    position: absolute;

    content: '';

    display: block;

    left: -2px;

    top: 0;

    right: -2px;

    bottom: 0;

    transform: scale(1, 1);

    transform-origin: left center;

    z-index: -1;

    background-color: #ffffff;

    transition: transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);

}

.button.dark:before {

    background-color: #0d2445;

}

.button {

    font-weight: 600;

    position: relative;

    display: inline-block;

    padding: 1rem 2.8rem;

    line-height: normal;

    border: 1px solid #ffffff;

    border-radius: 50px;

    text-transform: uppercase;

    font-size: 1.2rem;

    text-align: center;

    letter-spacing: 1px;

    background-color: transparent;

    transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86), border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);

    z-index: 1;

    color: #0d2445;

    overflow: hidden;

}

.button:hover:before {

    transform-origin: right center;

    transform: scale(0, 1);

}

button:focus:not(:focus-visible) {

    outline: 0;

}

button.dark:hover {

    color: #0d2445;

}