5 CSS3 Shake effect Button for Blogger ~ Crawlist

Someday ago I was checking a Wordpress plugin call ‘All in one CSS3 button’, in that plugin I saw a stunning CSS3 effect base button, when you hover that button it shakes! It seem pretty amazing to me and I want to make a version for Blogger blog users. It took a while to understand that code pattern but finally I did figured out how to do that and here I publishing CSS3 Shake effect on hover Button for Blogger, what you can use in your blog, for reference, linking etc. And based on that code 5 modern looking button I present to you, let’s see how they looks like and how to add ‘em in your Blogger blogs.

Ocean Blue CSS3 Shake Button

Download

A random button made with CSS3 keyframes, CSS, Google font, Gradient color. Easy design
flexible to any site

Codes for copy-

CSS-

/*crawlist.net button starts*/

@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

.ks-button-blue {width: 200px; height: 50px; color:#fff;
background: #00b7ea;
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
-webkit-border-radius:6px;
     -moz-border-radius:6px;
          border-radius:6px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2); }
.ks-button-blue a {font-family: 'Droid Serif', serif; font-size:26px; line-height:1.9; color:#fff; display:block; cursor:pointer; text-decoration: none; text-shadow:#f5f5f5; text-align: center; }
.ks-button-blue:hover {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -ms-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration:.8s;
    -moz-animation-duration: .8s;
    -ms-animation-duration: .8s;
    -o-animation-duration: .8s;
    animation-duration: .8s;
}
@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
    0%, 100% {-moz-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-ms-keyframes shake {
    0%, 100% {-ms-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-ms-transform: translateX(10px);}
}

@-o-keyframes shake {
    0%, 100% {-o-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
    20%, 40%, 60%, 80% {transform: translateX(10px);}
}
/*crawlist.net button ends*/

HTML-

<div class="ks-button-blue">
<a href="#">Download</a>
</div>

Glass Blue CSS3 Shaking Button

Download

A fantabulas button made with CSS3 keyframes, CSS, Google font, Gradient color, Data Url. Eye-catchy and I’m cool designed.

Codes for copy-

CSS-

/*crawlist.net button starts*/

@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

.ks-button-gloss {
vertical-align: top;
width:200px;
height:50px;
cursor: pointer;
border-radius:3px;
background: #b7deed;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I3ZGVlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzcxY2VlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIxYjRlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiN2RlZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7deed), color-stop(50%,#71ceef), color-stop(51%,#21b4e2), color-stop(100%,#b7deed));
background: -webkit-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
background: -o-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
background: -ms-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
background: linear-gradient(to bottom, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 );
   }
.ks-button-gloss a {font-family: 'Droid Serif', serif; font-size:26px; line-height:1.9; color:#fff; display:block; cursor:pointer; text-decoration: none; text-align: center;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.ks-button-gloss:hover {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -ms-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration:.8s;
    -moz-animation-duration: .8s;
    -ms-animation-duration: .8s;
    -o-animation-duration: .8s;
    animation-duration: .8s;
}

@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
    0%, 100% {-moz-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-ms-keyframes shake {
    0%, 100% {-ms-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-ms-transform: translateX(10px);}
}

@-o-keyframes shake {
    0%, 100% {-o-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
    20%, 40%, 60%, 80% {transform: translateX(10px);}
}
/*crawlist.net button ends*/

HTML-

<div class="ks-button-gloss">
<a href="#">Download</a>
</div>

Black beauty CSS3 Shaking Button

Download

A moody button made with CSS3 keyframes, CSS, Google font, Gradient color. Elegant and smart looking

Codes for copy-

CSS-

/*crawlist.net button starts*/

@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

.ks-button-black {
vertical-align: top;
width:200px;
height:50px;
cursor: pointer;
border-radius:3px;
background: #7d7e7d;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); }
.ks-button-black a {font-family: 'Droid Serif', serif; font-size:26px; line-height:1.9; color:#fff; display:block; cursor:pointer; text-decoration: none; text-align: center;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.ks-button-black:hover {
   -webkit-animation-name: shake;
   -moz-animation-name: shake;
   -ms-animation-name: shake;
   -o-animation-name: shake;
   animation-name: shake;
   -webkit-animation-duration:.8s;
   -moz-animation-duration: .8s;
   -ms-animation-duration: .8s;
   -o-animation-duration: .8s;
   animation-duration: .8s;
}
@-webkit-keyframes shake {
   0%, 100% {-webkit-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
   0%, 100% {-moz-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-ms-keyframes shake {
   0%, 100% {-ms-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-ms-transform: translateX(10px);}
}

@-o-keyframes shake {
   0%, 100% {-o-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
   0%, 100% {transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
   20%, 40%, 60%, 80% {transform: translateX(10px);}
}
/*crawlist.net button ends*/

HTML-

<div class="ks-button-black">
<a href="#">Download</a>
</div>

Orange Glossy CSS3 Shaking Button

Download

A happy button made with CSS3 keyframes, CSS, Google font, Gradient color, Data Url. Eye catchy
and I’m hot designed.

Codes for copy-

CSS-

/*crawlist.net button starts*/

@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

.ks-button-orange {
vertical-align: top;
width:200px;
height:50px;
cursor: pointer;
border-radius:3px;
background: #ffb76b;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYjc2YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmYTczZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2ZmN2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjdmMDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04));
background: -webkit-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);
background: -o-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);
background: -ms-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);
background: linear-gradient(to bottom, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 );
   }
.ks-button-orange a {font-family: 'Droid Serif', serif; font-size:26px; line-height:1.9; color:#fff; display:block; cursor:pointer; text-decoration: none; text-align: center;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.ks-button-orange:hover {
   -webkit-animation-name: shake;
   -moz-animation-name: shake;
   -ms-animation-name: shake;
   -o-animation-name: shake;
   animation-name: shake;
   -webkit-animation-duration:.8s;
   -moz-animation-duration: .8s;
   -ms-animation-duration: .8s;
   -o-animation-duration: .8s;
   animation-duration: .8s;
}
@-webkit-keyframes shake {
   0%, 100% {-webkit-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
   0%, 100% {-moz-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-ms-keyframes shake {
   0%, 100% {-ms-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-ms-transform: translateX(10px);}
}

@-o-keyframes shake {
   0%, 100% {-o-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
   0%, 100% {transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
   20%, 40%, 60%, 80% {transform: translateX(10px);}
}
/*crawlist.net button ends*/

HTML-

<div class="ks-button-orange">
<a href="#">Download</a>
</div>

Flat CSS3 Shaking Button

Download

A flat designed button made with CSS3 keyframes, CSS, Google font. Easy and modern looking

Codes for copy-

CSS-

/*crawlist.net button starts*/

@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

.ks-button-flat {
vertical-align: top;
width:200px;
height:50px;
background: #f39c12;
border-bottom: 3px solid #e8930c;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #e8930c;
box-shadow: inset 0 -2px #e8930c;
top:6px;
   }
.ks-button-flat a {font-family: 'Droid Serif', serif; font-size:26px; line-height:1.9; color:#fff; display:block; cursor:pointer; text-decoration: none; text-align: center;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.ks-button-flat:active {
-webkit-box-shadow: none;
box-shadow: none;
top:3px;
}
.ks-button-flat:hover {
   -webkit-animation-name: shake;
   -moz-animation-name: shake;
   -ms-animation-name: shake;
   -o-animation-name: shake;
   animation-name: shake;
   -webkit-animation-duration:.8s;
   -moz-animation-duration: .8s;
   -ms-animation-duration: .8s;
   -o-animation-duration: .8s;
   animation-duration: .8s;
}
@-webkit-keyframes shake {
   0%, 100% {-webkit-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
   0%, 100% {-moz-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-ms-keyframes shake {
   0%, 100% {-ms-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-ms-transform: translateX(10px);}
}

@-o-keyframes shake {
   0%, 100% {-o-transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
   20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
   0%, 100% {transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
   20%, 40%, 60%, 80% {transform: translateX(10px);}
}
/*crawlist.net button ends*/

HTML-

<div class="ks-button-flat">
<a href="#">Download</a>
</div>

How to add these buttons to your Blogger

These buttons set up has 3 steps, Read on-

Step 1: Backup your template

Select template option, click 'backup/restore' from upper right corner.

Download full template and save it on Harddrive

Step 2: Embed the CSS

Go to ‘Template’ tab, Select ‘Edit HTML’,

Search (Using CTRL+F or CMD+F) into code snippet) for ]]><

Copy and paste your desired button’s CSS code above ]]><

Step 3: Call and setup your button

When you writing post, Select (Compose/HTML)’s HTML part,

And paste your desired button’s HTML code,

In # this sign replace your link, and change ‘Download’ word with any word you want,

Go back to Compose part again. Easy as drinking water!…

Compatibility

Any web browser’s latest version will support these buttons (except-IE)

Works fine on any template.

So, any feedback leave with comment, I will publish more cool stuff for bloggers soon stay touch. Goodluck...

Crawlist

Blogger widgets tutorials, Wordpress Themes Plugins, Gadgets tools lists, HTML5 CSS3 tutorials

Menu