Make Icon Button Multi Use With CSS3

On this day I will deliver the article about Make Icon Button Multi Use With CSS3. Hopefully the article Make Icon Button Multi Use With CSS3 will add insight for you

Make Icon Button Multi Use With CSS, that's what I will discuss on this occasion, this button has many functions that can be used fatherly friend beautify the look of the blog, how interested not yes I immediately wrote to follow the tutorial below.

This CSS3 Code Snippets

 .my-button {
 text-transform:capitalize;
 cursor:pointer;
 padding:7px 15px;
 margin:7px 0 0;
 line-height:25px;
 display:inline-block;
 border:none;
 color:#fff;
 font-weight:bold;
 -webkit-text-shadow:0 -1px 0 rgba(0,0,0,0.2);
 -moz-text-shadow:0 -1px 0 rgba(0,0,0,0.2);
 text-shadow:0 -1px 0 rgba(0,0,0,0.2);
}
.my-button:hover { color:#fff; }
.small,.small:hover {
 line-height:12px;
 font-size:11px;
 -webkit-box-shadow:0 -5px 5px rgba(0,0,0,0.1) inset,0 1px 0 rgba(255,255,255,0.3) inset;
 -moz-box-shadow:0 -5px 5px rgba(0,0,0,0.1) inset,0 1px 0 rgba(255,255,255,0.3) inset;
 box-shadow:0 -5px 5px rgba(0,0,0,0.1) inset,0 1px 0 rgba(255,255,255,0.3) inset;
}
.medium,.medium:hover {
 line-height:18px;
 font-size:13px;
 -webkit-box-shadow:0 -10px 10px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;
 -moz-box-shadow:0 -10px 10px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;
 box-shadow:0 -10px 10px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;
}
.large,.large:hover {
 line-height:24px;
 font-size:14px;
 padding:9px 17px;
 -webkit-box-shadow:0 -10px 15px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;
 -moz-box-shadow:0 -10px 15px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;
 box-shadow:0 -10px 15px rgba(0,0,0,0.15) inset,0 1px 0 rgba(255,255,255,0.3) inset;
}
.blue {
 background-color:#01afe7;
 border:1px solid #009bcd;
}
.blue:hover {
 background-color:#15c6ff;
}
.slate {
 background-color:#838B8E;
 border:1px solid #767c7f;
}
.slate:hover {
 background-color:#939c9f;
}
.pink {
 background-color:#ea3271;
 border:1px solid #d72160;
}
.pink:hover {
 background-color:#FD5D94;
}
.lamb {
 background-color:#e6c470;
 border:1px solid #d5b462;
}
.lamb:hover {
 background-color:#F7D683;
}
.red {
 background-color:#D54336;
 border:1px solid #c5392c;
}
.red:hover {
 background-color:#f4695d;
}
.green {
 background-color:#8EC63F;
 border:1px solid #79ab34;
}
.green:hover {
 background-color:#a5e151;
}
.terra {
 background-color:#ef6658;
 border:1px solid #ec6a5d;
}
.terra:hover {
 background-color:#ff7f72;
}
.grey {
 background-color:#bdbdbd;
 border:1px solid #acacac;
}
.grey:hover {
 background-color:#CFCFCF;
}
.brown {
 background-color:#b0a066;
 border:1px solid #998b57;
}
.brown:hover {
 background-color:#C5B475;
}
.dark {
 background-color:#457D97;
 border:1px solid #35667c;
}
.dark:hover {
 background-color:#5695b3;
}
.white {
 background-color:#dddddd;
 border:1px solid #c7c7c7;
 color:#555;
}
.white:hover {
 background-color:#eee;
}
.black {
 background-color:#555;
 border:1px solid #333;
}
.black:hover {
 background-color:#757575;
}
.purple {
 background-color:#c215d5;
 border:1px solid #790186;
}
.purple:hover {
 background-color:#e034f3;
}
.orange {
 background-color:#FC9B0F;
 border:1px solid #e58700;
}
.orange:hover {
 background-color: #fcc10f;
}
.my-button span {
 float:left;
 display:inline-block;
 margin-top:3px;
 margin-right:5px;
}

1. Login first to sobat.2 blog account. Select Template menu> Edit HTML3. search code]]> </ b: skin> and place the code snippet above code]]> </ b: skin>.

The first step has been completed now turn to how to install the widget

 
1. Select Layout> Add Gadget> HTML / Javascript2. Copy the code below and place it in the HTML content column, and select one as needed buddy.

<a class="my-button medium blue" href="#"><img alt="" src="images/btn_info.png" />Information</a>
<a class="my-button medium green" href="#"><img alt="" src="images/btn_ok.png" />Success</a>
<a class="my-button medium orange" href="#"><img alt="" src="images/btn_warning.png" />Warning</a>
<a class="my-button medium red" href="#"><img alt="" src="images/btn_error.png" />Error</a>
<a class="my-button medium black" href="#"><img alt="" src="images/btn_add.png" />Add New</a>

<a class="my-button medium green" href="#"><img alt="" src="images/btn_down.png" />Download</a>
<a class="my-button medium purple" href="#"><img alt="" src="images/btn_up.png" />Upload</a>
<a class="my-button medium dark" href="#"><img alt="" src="images/btn_help.png" />Help</a>
<a class="my-button medium terra" href="#"><img alt="" src="images/btn_delete.png" />Delete</a>

Description: on a # replace with url links pal