• Breaking News

    Tuesday, 21 March 2017

    Button Hover Effect-2 Bootstrap

    Button Hover Effect-2  Bootstrap

    HTML:
    <div class="container">
    <div class="row">
    <div class="submit-wrapper">
        <a href="#">GET IN TOUCH</a>   
    </div>
    </div>
    </div>

    CSS:
    .submit-wrapper {
        margin-top:150px;
    }
    .submit-wrapper a {
        border:2px solid #f33;
        color:#000;
        padding:20px 25px;
        text-decoration:none;
        position:relative;
        letter-spacing:8px;
        transition:all 0.6s;
        z-index:1;
    }
    .submit-wrapper a:before,
    .submit-wrapper a:after {
        content:"";
        position:absolute;
        top:50%;
        left:0;
        width:24px;
        height:4px;
        background:#f33;
        margin-left:-12px;
        margin-top:-2px;
        transition:all 0.6s;
    }
    .submit-wrapper a:after {
        left:auto;
        right:0;
        margin-right:-12px;
    }
    .submit-wrapper a:hover:before,
    .submit-wrapper a:hover:after {
        width:100%;
        transition:all 0.6s;
        background:#fff;
        transform:scaleY(5);
        z-index:-1;
    }
    .submit-wrapper a:hover {
        text-decoration:none;
        background:#f33;
        transition:all 0.6s;
        color:#f33;
    }

    No comments:

    Post a Comment

    Fashion

    Beauty

    Travel