How to Make 27 Icons Buttons With Various Effects

Scroll Down and click on Go to Link for destination

Congrats! Link is Generated

How to Make 27 Icons Buttons With Various Effects . Sometimes from a button on a page posting we can make visitors to be impressed and want to also put it on their blogs , because the buttons have a certain appeal in terms of both appearance and color and this time I was right to share a tutorial how to create a button on the post pages blog with Transition Background effect .
27 Icons Buttons With Various Effects by default for those who use blogger platforms are not available , well if my friend wants to make the display button on your blog becomes " more beautiful attractive ". Original tutorial written by All Tutorial.

How to Make 27 Icons Buttons With Various Effects [images source:pixabay.com]

Let's start to add the Icons Buttons With Various Effects:

Step 1: Login to your blogger panel admin

Step 2: Click On Template » Edit HTML

Step 3: Add this code just above the code </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href="//cdn.rawgit.com/antoncabon/css/master/icons.css" rel="stylesheet" type="text/css"/>

Step 4: Find this code Ctrl+F  ]]></b:skin> or </style>

Step 5: Then add the following CSS script just above the code ]]></b:skin> or </style>

.kotak {margin:20px auto;text-align:center;}
.btn{display:inline-block;position:relative;font-family:'Open Sans',Helvetica,sans-serif;text-decoration:none;font-weight:700;background:#333;padding:9px 28px;margin:5px 5px;border-radius:3px;opacity:1;border:0;text-transform:uppercase;transition:all .3s ease-out;}

Save your template.
Step 6: Add the following HTML code on the posting page.

<div class="kotak">
<a href="#" class="btn hvr-icon-back">Icon Back</a>
<a href="#" class="btn hvr-icon-forward">Icon Forward</a>
<a href="#" class="btn hvr-icon-down">Icon Down</a>
<a href="#" class="btn hvr-icon-up">Icon Up</a>
<a href="#" class="btn hvr-icon-spin">Icon Spin</a>
<a href="#" class="btn hvr-icon-drop">Icon Drop</a>
<a href="#" class="btn hvr-icon-fade">Icon Fade</a>
<a href="#" class="btn hvr-icon-float-away">Icon Float Away</a>
<a href="#" class="btn hvr-icon-sink-away">Icon Sink Away</a>
<a href="#" class="btn hvr-icon-grow">Icon Grow</a>
<a href="#" class="btn hvr-icon-shrink">Icon Shrink</a>
<a href="#" class="btn hvr-icon-pulse">Icon Pulse</a>
<a href="#" class="btn hvr-icon-pulse-grow">Icon Pulse Grow</a>
<a href="#" class="btn hvr-icon-pulse-shrink">Icon Pulse Shrink</a>
<a href="#" class="btn hvr-icon-push">Icon Push</a>
<a href="#" class="btn hvr-icon-pop">Icon Pop</a>
<a href="#" class="btn hvr-icon-bounce">Icon Bounce</a>
<a href="#" class="btn hvr-icon-rotate">Icon Rotate</a>
<a href="#" class="btn hvr-icon-grow-rotate">Icon Grow Rotate</a>
<a href="#" class="btn hvr-icon-float">Icon Float</a>
<a href="#" class="btn hvr-icon-sink">Icon Sink</a>
<a href="#" class="btn hvr-icon-bob">Icon Bob</a>
<a href="#" class="btn hvr-icon-hang">Icon Hang</a>
<a href="#" class="btn hvr-icon-wobble-horizontal">Icon Wobble Horizontal</a>
<a href="#" class="btn hvr-icon-wobble-vertical">Icon Wobble Vertical</a>
<a href="#" class="btn hvr-icon-buzz">Icon Buzz</a>
<a href="#" class="btn hvr-icon-buzz-out">Icon Buzz Out</a>
</div>

Step 7: Last step and make a posting then publish it, see the results and good luck.

That's a little explanation from me about on How to Make 27 Icons Buttons With Various Effects , i hope this article can help you, also look forward for my next tutorial, see you.

Credit Source : All Tutorial

Go to Link