How To Create A Exceptional Button With Simple JS In HTML

You can use these buttons to make your website beautiful. Below is the button’s style code on how to use them.

So, Let’s get started!

 

HTML

<a href="#" class="default-btn">Contact Us<span></span></a>

CSS

.default-btn {
    border: none;
    position: relative;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    padding: 15px 30px;
    z-index: 1;
    background-color: #fd9518;
    color: $white-color;
    transition: .5s;
    border-radius: 10px;
    text-transform: capitalize;
    opacity: 1;
    font-size: 15px;

    span {
        position: absolute;
        display: inline-block;
        width: 0;
        height: 0;
        background-color: #19233c;
        color: #ffffff;
        transition: .5s, 
        height 0.5s ease-in-out;
        transform: translate(-50%, -50%);
        z-index: -1;
        border-radius: 30px;
        opacity: 1;
    }

    i {
        position: relative;
        top: 2px;
    }

    &:hover {
        color: $ffffff !important;
        span {
            width: 200%;
            height: 200px;
        }
    }
}

JS

$(function() {
       $('.default-btn')
       .on('mouseenter', function(e) {
           var parentOffset = $(this).offset(),
           relX = e.pageX - parentOffset.left,
           relY = e.pageY - parentOffset.top;
           $(this).find('span').css({top:relY, left:relX})
       })
       .on('mouseout', function(e) {
           var parentOffset = $(this).offset(),
           relX = e.pageX - parentOffset.left,
           relY = e.pageY - parentOffset.top;
           $(this).find('span').css({top:relY, left:relX})
       });
   });

Leave a Reply

Your email address will not be published.