Wifeo Creative Code

<<< back to homepage for others creatives tricks

CSS HOVER ADD BUTTON

Ajouter au panier

Add to cart

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="mCFbo" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/mCFbo'>Codepen</a>
<script async src="//codepen.io/assets/embed/ei.js"></script><div align="center">View source code on <a href="http://www.wifeo.com/code/10-css-hover-add-button.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

/*///////////////////////////////BOUTON _ 1///////////////////////////////////////*/
.bouton_1{
    width:200px;
    height:40px;
    padding:10px;
    border-radius:40px;
    background-color:#CB2025;
    overflow:hidden;
    -webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -ms-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
    transition:all 0.2s ease-in;
}
.bouton_1:hover{
    width:40px;
    height:40px;
    border-radius:40px;
    background-color:#60121C;
}
.texteduboutton_1
{
    width:70%;
    padding-right: 10px;
    float:right;
    line-height:40px;
    color:#ffffff;
    font-family:'Roboto';
    font-weight:300;
    font-size:18px;
}

/*///////////////////////////////BOUTON _ 2///////////////////////////////////////*/
.bouton_2{
    width:200px;
    height:40px;
    padding:10px;
    background-color:#CB2025;
    overflow:hidden;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.bouton_2:hover{
    width:40px;
    height:40px;
    background-color:#60121C;
    -webkit-transform:rotateZ(360deg);
    -moz-transform:rotateZ(360deg);
    -ms-transform:rotateZ(360deg);
    -o-transform:rotateZ(360deg);
    transform:rotateZ(360deg);
}
.texteduboutton_2
{
    width:70%;
    padding-right: 10px;
    float:right;
    line-height:40px;
    color:#ffffff;
    font-family:'Roboto';
    font-weight:300;
    font-size:18px;
}
/*///////////////////////////////BOUTON _ 3///////////////////////////////////////*/

.bouton_3{
    overflow:hidden;
    width:200px;
    height:40px;
    padding:10px;
    background-color:#CB2025;
}
.bouton_3:hover{
    width:40px;
    height:40px;
    background-color:#60121C;
    -webkit-animation: anim_trois 1.2s;
    -moz-animation: anim_trois 1.2s;
    -ms-animation: anim_trois 1.2s;
    -o-animation: anim_trois 1.2s;
    animation: anim_trois 1.2s;
}
.texteduboutton_3
{
    width:70%;
    padding-right: 10px;
    float:right;
    line-height:40px;
    color:#ffffff;
    font-family:'Roboto';
    font-weight:300;
    font-size:18px;
}
@-webkit-keyframes anim_trois {
    0% {
        width:200px;
        -webkit-transform: perspective( 600px ) rotateY( 0deg );
    }
    50% {
        width:40px;
        height:40px;
        -webkit-transform: perspective( 600px ) rotateY( 0deg );
    }
    100% {
        width:40px;
        height:40px;
        background-color:#60121C;
        -webkit-transform: perspective( 600px ) rotateY( 180deg );
    }
}
@-moz-keyframes anim_trois {
    0% {
        width:200px;
        -moz-transform: perspective( 600px ) rotateY( 0deg );
    }
    50% {
        width:40px;
        height:40px;
        -moz-transform: perspective( 600px ) rotateY( 0deg );
    }
    100% {
        width:40px;
        height:40px;
        background-color:#60121C;
        -moz-transform: perspective( 600px ) rotateY( 180deg );
    }
}
@-ms-keyframes anim_trois {
    0% {
        width:200px;
        -ms-transform: perspective( 600px ) rotateY( 0deg );
    }
    50% {
        width:40px;
        height:40px;
        -ms-transform: perspective( 600px ) rotateY( 0deg );
    }
    100% {
        width:40px;
        height:40px;
        background-color:#60121C;
        -ms-transform: perspective( 600px ) rotateY( 180deg );
    }
}
@-o-keyframes anim_trois {
    0% {
        width:200px;
        -o-transform: perspective( 600px ) rotateY( 0deg );
    }
    50% {
        width:40px;
        height:40px;
        -o-transform: perspective( 600px ) rotateY( 0deg );
    }
    100% {
        width:40px;
        height:40px;
        background-color:#60121C;
        -o-transform: perspective( 600px ) rotateY( 180deg );
    }
}
@keyframes anim_trois {
    0% {
        width:200px;
        transform: perspective( 600px ) rotateY( 0deg );
    }
    50% {
        width:40px;
        height:40px;
        transform: perspective( 600px ) rotateY( 0deg );
    }
    100% {
        width:40px;
        height:40px;
        background-color:#60121C;
        transform: perspective( 600px ) rotateY( 180deg );
    }
}


/*///////////////////////////////BOUTON _ 4///////////////////////////////////////*/
.bouton_4{
    width:40px;
    height:40px;
    padding:10px;
    border-radius:40px;
    background-color:#CB2025;
    overflow:hidden;
    -webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -ms-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
    transition:all 0.2s ease-in;
}
.bouton_4:hover{
    width:200px;
    height:40px;
    border-radius:40px;
    background-color:#97bf0d;
}
.texteduboutton_4
{
    width:70%;
    padding-right: 10px;
    float:right;
    line-height:40px;
    color:#ffffff;
    font-family:'Roboto';
    font-weight:300;
    font-size:18px;
}

HTML CODE :

<div align="center">
&nbsp;
            <div class="bouton_1">
                <a href="#123"><img src="http:YOUR-URL-IMAGE.png"/>
                <span class="texteduboutton_1">Ajouter au panier</span></a>
            </div>
&nbsp;
            <div class="bouton_2">
                <a href="#123"><img src="http:YOUR-URL-IMAGE.png"/>
                <span class="texteduboutton_2">Ajouter au panier</span></a>
            </div>
&nbsp;
            <div class="bouton_3">
                <a href="#123"><img src="http:YOUR-URL-IMAGE.png"/>
                <span class="texteduboutton_3">Ajouter au panier</span></a>
            </div>
&nbsp;
            <div class="bouton_4">
                <a href="#123"><img src="http:YOUR-URL-IMAGE.png"/>
                    <span class="texteduboutton_4">Add to cart</span></a>
            </div>
&nbsp;
</div>