CSS3 Animasi Button

 

Demo

Tampilan terbaik dapat dirasakan dengan browser Goggle chrome karena 100%
mendukung css3 animasi.sedangkan untuk Mozilla firefox tidak.akibat'a kalau
dibuka dengan Mozilla,mungkin akan terasa berat dan animasinya agak ngadet",
jadi pikir" dahulu untuk menggunakan trik ini.so,yang mau coba" belajar css3 keyframe,silakan
dicoba"~xD

Penerapannya letakkan CSS diatas ]]></b:skin>
HTML merupakan kode pemanggilnya

 Style 1 CSS

.circlewrapper {
    width: 98px;
    height: 98px;
    float: right;
    font-size: 14px;
    text-align: center;
    text-shadow: 0 1px 1px black;
    }


    .circle {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(255,0,0,0.9);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #ff0000;
    width:70px;
    height:70px;
    margin:0 auto;
    -moz-animation:spin1Pulse 1s infinite ease-in-out;
    -webkit-animation:spin1Pulse 1s infinite linear;
    }
    .circle1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(255,0,0,0.9);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #ff0000;
    width:50px;
    height:50px;
    margin:0 auto;
    position:relative;
    top:-70px;
    -moz-animation:spin2Pulse 1s infinite linear;
    -webkit-animation:spin2Pulse 1s infinite linear;
    }


    .circle2 {
    background-color: transparent;
    border: 5px solid rgba(255, 0, 0, 0.9);
    opacity: .9;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-radius: 50px;
    box-shadow: 0 0 15px #ff0000;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    position: relative;
    top: -150px;
    text-align: center;
    line-height: 90px;
    }


    @-moz-keyframes spin1Pulse {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
    50% { -moz-transform:rotate(145deg); opacity:1;}
    100% { -moz-transform:rotate(-320deg); opacity:0;}
    }
    @-moz-keyframes spin2Pulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);}
    }
    @-webkit-keyframes spin1Pulse {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0;}
    }
    @-webkit-keyframes spin2Pulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg);}
    }

HTML

<div class="circlewrapper">
    <div class="circle"></div>
    <div class="circle1"></div>
    <div class="circle2">
    <a expr:href='#'>DEMO</a>
    </div></div>

Style 2
CSS

.circlebg {
width: 53px;
height: 53px;
position: relative;
border-radius: 50px;
-moz-animation: spin3Pulse 3s infinite ease-in-out;
-webkit-animation: spin3Pulse 3s infinite linear;
}


.circlewrapper2 {
width: 53px;
height: 53px;
text-align: center;
border-radius: 50px;
border: 3px solid rgba(0, 0, 0, 0.9);
padding: 8px;
background: -webkit-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
background: -moz-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
}


.circlewrapper3 {float:right;}


.circlewrapper3 a {
width: 78px;
height: 78px;
float: right;
font-size: 14px;
text-align: center;
border-radius: 50px;
text-shadow: 0 1px 1px black;
margin-top: -50px;
position: absolute;
line-height: 20px;
}


.circle4 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
}




.circle5 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -51.5px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
}


.circle6 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -103.5px;
}


.circle7 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -155px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
}




@-moz-keyframes spin3Pulse {
0% { -moz-transform:rotate(360deg); }
100% { -moz-transform:rotate(0deg);}
}
@-webkit-keyframes spin3Pulse {
0% { -webkit-transform:rotate(360deg);}
100% { -webkit-transform:rotate(0deg); }
}

HTML

<div class="circlewrapper3">
<div class="circlewrapper2">
<div class="circlebg">
<div class="circle4"></div>
<div class="circle5"></div>
<div class="circle6"></div>
<div class="circle7"></div>
</div></div>
<a expr:href='#'>DEMO</a>
</div>

Style 3
CSS

.menureadmore1 {
clear: both;
margin:auto;
background: black;
font-size: 15px;
color: #32BDE8;
height: 80px;
width: 80px;
line-height: 80px;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border: 8px solid 
rgba(255, 255, 255, 0.8 );
-webkit-box-shadow: 0 1px 4px 
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;}


.menureadmore1::before {
content: "";
position: absolute;
width: 125px;
margin: auto;
height: 125px;
border: 8px solid 
rgba(255, 255, 255, 0.8 );
-webkit-box-shadow: 0 1px 4px 
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-border-radius: 12px;
-moz-border-radius: 120px;
border-radius: 120px;
display: block;
margin-top: -30px;
margin-left: -30px;
}


.animasimenureadmore1 {
position: absolute;
width: 105px;
margin: auto;
height: 105px;
border: 8px dotted rgba(50, 189, 232, 0.8 );
-webkit-box-shadow: 0 1px 4px 
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-border-radius: 12px;
-moz-border-radius: 120px;
border-radius: 120px;
display: block;
margin-top: -100px;
margin-left: -20px;
-moz-animation:spin5Pulse 2s infinite linear;
-webkit-animation:spin5Pulse 2s infinite linear;
}


@-moz-keyframes spin5Pulse {
0% { -moz-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% {opacity:1;}
100% { -moz-transform:rotate(-360deg); opacity:0;}
}
@-webkit-keyframes spin5Pulse {
0% { -webkit-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% {opacity:1;}
100% { -webkit-transform:rotate(-360deg); opacity:0;}
}

HTML

<div class='menureadmore1'>
    <a expr:href='#'>DEMO</a>
    <div class='animasimenureadmore1'/>
    </div>

About the Author

Written by Admin

Previl_TM is a modern, template is very suitable for a template of your blog,and features a very cool and nice so from me, Predator Evil TM