Typewriter Punching Buttons Widget For Blogger

Rohan Mod

26 Oct, 2013

Typewriter Punching buttons for blogger works awesome with a mouse hover. Widget Built in CSS. Easy to use and install. Use for code and as a download button.

Typewriter punching buttons for blogger that can be used to sign up buttons and download buttons. This is completely based on html and css. Installation is easy. You just have to copy the code and paste it anywhere you want this code to appear. In our last post we shared Animated electric toggle button widget for blogger and before that we have shared too many download buttons for you. Take a look at some of the best buttons widget : -

Flip trick download buttons for blogger

Animated download buttons widget for blogger

Animated image gallery widget for blogger.

If you want more click on this button then here is valuable article that will increase clicks on the buttons.

Optimization of buttons to get more clicks

When you will click on this button it gives you a feel of like you are typing on typewriters and punching the keys that is the reason I gave it a name typewriter punching button widget for blogger. All these animation effects are made by CSS coding. Lets see below how to add this widget to blogger.

Installation For Using it on the sidebar.

Login to blogger.
Go to layout.
Click on add a gadget.
Choose HTML/JAVASCRIPT.
Copy the below code.
Paste in the gadget and you are done.

Complete code

The above code was for a sidebar. If you want to use this button in the sidebar .

If you want to use the buttons in the post : -

If you want to use this button in your post then you have two options. First is copy the entire code and paste it into the HTML Mode of your post editor.

The second way is to copy the css code and do like this .

Go to blogger dashboard .
Click on edit HTML.
Now search for ]]></b:skin>
And copy the below code above this.

avdhoot {
display:inline-block;
position:relative;
background-color:#3e9cbf;
width:70px;
height:70px;
margin:0 5px;
-webkit-box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
-moz-box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
font:normal normal 30px/70px "Comic Sans MS",Verdana,Arial,Sans-Serif;
text-align:center;
color:#fff;
cursor:default;
}

avdhoot:hover {
top:5px;
-webkit-box-shadow:0 2px 2px rgba(0,0,0,.2);
-moz-box-shadow:0 2px 2px rgba(0,0,0,.2);
box-shadow:0 2px 2px rgba(0,0,0,.2);
}

avdhoot:active {
top:6px;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
box-shadow:0 1px 2px rgba(0,0,0,.2);
}

Save your template.

Now HTML part.

Copy the below code and paste anywhere you want this punching buttons to appear.

Customization

Change w, x, y, z with your desired names.
You can also change the color of buttons and fonts in css of this widget.

Did you like this typewriter punching buttons widget for blogger then please share it and give me your feedback as a comment.

blogger widgets download buttons punching buttons widget for blogger

Typewriter Punching Buttons Widget For Blogger