Four animation effects buttons implemented by css3 and 34 Special Effects buttons implemented by css3

Source: Internet
Author: User

Four animation effects buttons implemented by css3 and 34 Special Effects buttons implemented by css3

Today we will introduce you to the css3 button, which contains four special effects of animation, such:


Online Preview and download source code


Implement html code:

  <div align="center" class="fond">            <br />            <div class="bouton_1">                <a href="#123">                                        <span class="texteduboutton_1">Ajouter au panier</span></a>            </div>            <br />            &nbsp;<br />            <div class="bouton_2">                <a href="#123">                                        <span class="texteduboutton_2">Ajouter au panier</span></a>            </div>            <br />            &nbsp;<br />            <div class="bouton_3">                <a href="#123">                                        <span class="texteduboutton_3">Ajouter au panier</span></a>            </div>            <br />            &nbsp;<br />            <div class="bouton_4">                <a href="#123">                                        <span class="texteduboutton_4">Add to cart</span></a>            </div>            <br />            &nbsp;<br />        </div>

Implemented css code:

.fond{position:fixed;padding-top:px;top:0;left:0; right:0;bottom:0;  background-image:url(fond_4.jpg);background-size:cover;overflow-y:auto;}/*///////////////////////////////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;}

Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/4762


How does css3 + html load the display animation instead of clicking a button to achieve the effect?

When loading the page, a js script is automatically loaded and the button is clicked.
 
Css3 animated effects of image text

<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> untitled document </title>
<Style type = "text/css">
* {Padding: 0; margin: 0; border: 0 ;}
. Left {width: 50%; float: left;
Animation: myfirst 5S;
-Moz-animation: myfirst 5S;/* Firefox */
-Webkit-animation: myfirst 5S;/* Safari and Chrome */
-O-animation: myfirst 5S;/* Opera */
}

. Right {width: 50%; float: left;
Animation: myfirst 5S;
-Moz-animation: myfirst 5S;/* Firefox */
-Webkit-animation: myfirst 5S;/* Safari and Chrome */
-O-animation: myfirst 5S;/* Opera */
Animation-delay: 5S;/* W3C and Opera */
-Moz-animation-delay: 5S;/* Firefox */
-Webkit-animation-delay: 5S;/* Safari and Chrome */
}

@ Keyframes myfirst
{
0% {opacity: 0 ;}
100% {opacity: 1 ;}
}

@-Moz-keyframes myfirst/* Firefox */
{
0% {opacity: 0 ;}
100% {opacity: 1 ;}
}

@-Webkit-keyframes myfirst/* Safari and Chrome */
{
0% {opacity: 0 ;}
100% {opacity: 1 ;}
}

@-O-keyframes myfirst/* Opera */
{
0% {opacity: 0 ;}
100% {opacity: 1 ;}
}
</Style>
</Head>

<Body>
<Div>
<Div class = "left"> </div>
<Div class = "right"> text XXXXXXXXXXXXXXXXXXXXXXXX </div>
</Div>
</Body>
</Html>... the remaining full text>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.