• Breaking News

    Tuesday, 21 March 2017

    Hover Effect On Button in Boostarp

    Hover Effect On Button in Boostarp

     Boostarp

    Html :

    <div class="container">
    <div class="row">
    <h2 class="text-center page-header">Hover Effect On Button</h2>
            <button class="btn-change">Button</button>
            <button class="btn-change1">Button</button>
            <button class="btn-change2">Button</button>
            <button class="btn-change3">Button</button>
            <button class="btn-change4">Button</button>
            <button class="btn-change5">Button</button>
            <button class="btn-change6">Button</button>
            <button class="btn-change7">Button</button>
            <button class="btn-change8">Button</button>
    </div>
    </div>

    CSS:

    body {
      font: 400 1.4rem 'Lato', Verdana, Helvetica, sans-serif;
    }
    .btn-change{
        height: 50px;
        width: 100px;
        background: lightseagreen;
        margin: 20px;
        float: left;
        box-shadow: 0 0 1px #ccc;
        -webkit-transition: all 0.5s ease-in-out;
        border: 0px;
        color: #fff;
    }
    .btn-change:hover{
        -webkit-transform: scale(1.1);
        background: #31708f;
    }
    .btn-change1{
        height: 50px;
        width: 100px;
        background: lightseagreen;
        margin: 20px;
        float: left;
        border: 0px;
        color: #fff;
        box-shadow: 0 0 1px #ccc;
        -webkit-transition-duration: 0.5s;
        -webkit-box-shadow: 0px 0px 0 0 #31708f inset , 0px 0px 0 0 #31708f inset;
    }
    .btn-change1:hover{
        -webkit-box-shadow: 50px 0px 0 0 #31708f inset , -50px 0px 0 0 #31708f inset;
    }
    .btn-change2{
        height: 50px;
        width: 100px;
        background: #31708f ;
        margin: 20px;
        float: left;
        border:0px;
        color:#fff;
        box-shadow: 0 0 1px #ccc;
        -webkit-transition-duration: 0.5s;
        -webkit-transition-timing-function: ease-out;
        -webkit-transform-origin: 0 0;
        box-shadow:0px 0px 0 100px lightseagreen inset;
    }
    .btn-change2:hover{
        -webkit-box-shadow:0px 0px 0 0px lightseagreen inset;
        -webkit-transform: scale(1);
    }
    .btn-change3{
        height: 50px;
        width: 100px;
        background: lightseagreen;
        margin: 20px;
        float: left;
        border:0px;
        color:#fff;
        box-shadow: 0 0 1px #ccc;
        -webkit-transition-duration: 0.5s;
        -webkit-transition-timing-function: ease-out;
        -webkit-box-shadow: 0px 0px 0 0 #31708f inset , 0px 0px 0 #31708f inset;
    }
    .btn-change3:hover{
        -webkit-box-shadow: 0px 50px 0 0px #31708f inset , 0px -50px 0 0px #31708f inset; 
    }
    .btn-change4{
        height: 50px;
        width: 100px;
        background: #31708f ;
        margin: 20px;
        float: left;
        border:0px;
        color:#fff;
        box-shadow: 0 0 1px #ccc;
        -webkit-transition-duration: 0.5s;
        -webkit-transform-origin: 50% 50%;
        -webkit-transition-timing-function: ease-out;
        -webkit-box-shadow: 0px -50px 0 0 lightseagreen inset , 0px 50px 0 lightseagreen inset;
    }
    .btn-change4:hover{
        -webkit-box-shadow: 0px 0px 0 0px lightseagreen inset , 0px 0px 0 0px lightseagreen inset; 
    }
    .btn-change5{
        height: 50px;
        width: 100px;
        background: #31708f;
        margin: 20px;
        float: left;
        border:0px;
        color:#fff;
        box-shadow: 0 0 1px #ccc;
        -webkit-transform-origin: 50% 50%;
        -webkit-transition-duration: 0.5s;
        -webkit-transition-timing-function: ease-out;
        -webkit-box-shadow: 50px 0px 0 0 lightseagreen inset , -50px 0px 0 lightseagreen inset;
    }
    .btn-change5:hover{
        -webkit-box-shadow: 0px 0px 0 0 lightseagreen inset , 0px 0px 0 lightseagreen inset;
    }
    .btn-change6{
        height: 50px;
        width: 100px;
        background: lightseagreen;
        margin: 20px;
        float: left;
        border:0px;
        color:#fff;
        box-shadow: 0 0 1px #ccc;
        -webkit-transition-duration: 0.2s;
        -webkit-transition-timing-function: linear;
        box-shadow:0px 0 0 #31708f  inset;
    }
    .btn-change6:hover{
        box-shadow:0 0 0 25px #31708f  inset;
        -webkit-transform: scale(1);
    }
    .btn-change7{
        height: 50px;
        width: 100px;
        background: lightseagreen;
        margin: 20px;
        float: left;
        border:0px;
        color:#fff;
        box-shadow: 0 0 1px #ccc;
        -webkit-transition-duration: 0.5s;
        -webkit-transition-timing-function: linear;
        box-shadow:0px 0 0 #31708f  inset;
    }
    .btn-change7:hover{
        box-shadow:100px 0 0 #31708f inset;
    }
    .btn-change8{
        height: 50px;
        width: 100px;
        background: lightseagreen;
        margin: 20px;
        float: left;
        border:0px;
        color:#fff;
        box-shadow: 0 0 1px #ccc;
        -webkit-transition-duration: 0.5s;
        -webkit-transition-timing-function: linear;
        box-shadow:0px 0 0 #31708f  inset;
    }
    .btn-change8:hover{
        -webkit-box-shadow: -100px 0 0 #31708f inset;
    }

    No comments:

    Post a Comment

    Fashion

    Beauty

    Travel