10 Amazing CSS3 Buttons

I hand picked ten amazing CSS3 buttons from net which are totally cool and easy to user just like all my other tutorials. By the way because of my template you'll see all button font in orange color which is not their real color but they are just like you can see in above pic.

Button #1 :
Paypal

HTML :

<a href="#" Class="buttonPaypal" >Paypal</a>

CSS :

.buttonPaypal {
    display: inline-block;
    background: #fedc9a;
    -webkit-box-shadow: 0px -2px 2px -1px #fef0c7 inset, 0px 2px 5px -2px #000, 0px -15px 1px 0px #ffab2b inset, 0px 5px 10px 0px #fff inset;
    -moz-box-shadow: 0px -2px 2px -1px #fef0c7 inset, 0px 2px 5px -2px #000, 0px -15px 1px 0px #ffab2b inset, 0px 5px 10px 0px #fff inset;
    box-shadow: 0px -2px 2px -1px #fef0c7 inset, 0px 2px 5px -2px #000, 0px -15px 1px 0px #ffab2b inset, 0px 5px 10px 0px #fff inset;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 1px 1px 1px #ffffff;
    padding: 5px 20px;
    margin: 5px 5px;
    border-color: #ffab2b;
    border-width: 1px;
    border-style: solid;
    text-align: center;
    font-size: 14px;
    color: #003366;
    font-weight: bold;
    text-decoration: none;
}

Button #2 :Fast
HTML :

<a href="#" Class="buttonFast" >Fast</a>

CSS :

.buttonFast {
    display: inline-block;
    background: #EEEEEE;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#697680), color-stop(50%,#3d3d3d), color-stop(50%,#292929), color-stop(100%,#171717));
    background: -moz-linear-gradient(center top, #697680 0%, #3d3d3d 50%, #292929 50%, #171717 100%);
    -webkit-box-shadow: 0px 1px 0px 0px #949494 inset, 0px -1px 5px 0px #757575 inset;
    -moz-box-shadow: 0px 1px 0px 0px #949494 inset, 0px -1px 5px 0px #757575 inset;
    box-shadow: 0px 1px 0px 0px #949494 inset, 0px -1px 5px 0px #757575 inset;
    -webkit-border-radius: 28px 8px 28px 8px;
    -moz-border-radius: 28px 8px 28px 8px;
    border-radius: 28px 8px 28px 8px;
    padding: 0px 20px;
    display: block;
    border-color: #000000;
    text-decoration: none;
    border-width: 1px;
    width:50px;
    border-style: solid;
    text-align: center;
    font-family: Lucida Grande;
    font-size: 14px;
    line-height: 34px;
    color: #FFFFFF;
    font-weight: bold;
    font-style: italic;
}
.buttonFast:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffae24), color-stop(50%,#ff7600), color-stop(50%,#ff6900), color-stop(100%,#ff7600));
    background: -moz-linear-gradient(center top, #ffae24 0%, #ff7600 50%, #ff6900 50%, #ff7600 100%);
    -webkit-box-shadow: 0px 1px 0px 0px #ffae42 inset, 0px -1px 5px 0px #ffd200 inset;
    -moz-box-shadow: 0px 1px 0px 0px #ffae42 inset, 0px -1px 5px 0px #ffd200 inset;
    box-shadow: 0px 1px 0px 0px #ffae42 inset, 0px -1px 5px 0px #ffd200 inset;
    text-shadow: 0px 0px 3px #ffeedd;
    border-color: #8a0000;
}
.buttonFast:active {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd213), color-stop(100%,#ffef24));
    background: -moz-linear-gradient(center top, #ffd213 0%, #ffef24 100%);
    -webkit-box-shadow: 0px 1px 3px 0px #d2b400 inset;
    -moz-box-shadow: 0px 1px 3px 0px #d2b400 inset;
    box-shadow: 0px 1px 3px 0px #d2b400 inset;
    text-shadow: 1px 1px 2px #ae7600;
    border-color: #a17600;
    line-height: 33px;
    color: #ffffd2;
}

Button #3 :
Tweet Button

HTML :

<a href="#" Class="buttonTweet" >Tweet Button</a>

CSS :

.buttonTweet {
    display: inline-block;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#d6e7f0));
    background: -moz-linear-gradient(center top, #FFFFFF 0%, #d6e7f0 100%);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-shadow: 1px 1px 0px #FFFFFF;
    padding: 0px 8px;
    border-color: #a4cce5;
    border-width: 1px;
    border-style: solid;
    font-size: 14px;
    color: #186487;
    font-weight: bold;
    text-decoration: none;
}
.buttonTweet:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f8fc), color-stop(100%,#c1e0ed));
    background: -moz-linear-gradient(center top, #f2f8fc 0%, #c1e0ed 100%);
    border-color: #53a3d6;
    color: #133e58;
}
.buttonTweet:active {
    background: #cee5f4;
    text-shadow: 1px 1px 0px #e5f0f7;
    border-color: #7ab8df;
    color: #658a9d;
}

Button #4 :
Select An iPhone

HTML :

<a href="#" Class="buttonApple" >Select An iPhone</a>

CSS :

.buttonApple {
   background-color: rgba(18,127,210,1);
   background-image: -webkit-linear-gradient(top, rgba(54,168,234,1) 0%,rgba(18,127,210,1) 100%);
   background-image:    -moz-linear-gradient(top, rgba(54,168,234,1) 0%,rgba(18,127,210,1) 100%);
   background-image:     -ms-linear-gradient(top, rgba(54,168,234,1) 0%,rgba(18,127,210,1) 100%);
   background-image:      -o-linear-gradient(top, rgba(54,168,234,1) 0%,rgba(18,127,210,1) 100%);
   background-image:         linear-gradient(top, rgba(54,168,234,1) 0%,rgba(18,127,210,1) 100%);
   -webkit-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 1px 0px 0px 0px rgba(255,255,255,0.4)inset, -1px 0px 0px 0px rgba(255,255,255,0.4)inset;
      -moz-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 1px 0px 0px 0px rgba(255,255,255,0.4)inset, -1px 0px 0px 0px rgba(255,255,255,0.4)inset;
           box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 1px 0px 0px 0px rgba(255,255,255,0.4)inset, -1px 0px 0px 0px rgba(255,255,255,0.4)inset;
   border: solid 1px rgba(3,94,163,1);
   -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
           border-radius: 6px;
   width: 210px;
   display: inline-block;
   font-size: 16px;
   text-decoration: none;
   line-height: 40px;
   text-align: center;
   color: rgba(255,255,255,1);
   text-shadow: 0px 1px 1px rgba(0,0,0,0.33)
}
.buttonApple:hover {
   background-image: -webkit-linear-gradient(top, rgba(47,144,213,1) 0%,rgba(3,81,183,1) 100%);
   background-image:    -moz-linear-gradient(top, rgba(47,144,213,1) 0%,rgba(3,81,183,1) 100%);
   background-image:     -ms-linear-gradient(top, rgba(47,144,213,1) 0%,rgba(3,81,183,1) 100%);
   background-image:      -o-linear-gradient(top, rgba(47,144,213,1) 0%,rgba(3,81,183,1) 100%);
   background-image:         linear-gradient(top, rgba(47,144,213,1) 0%,rgba(3,81,183,1) 100%);
   -webkit-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 0px -1px 0px 0px rgba(255,255,255,0.2)inset;
      -moz-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 0px -1px 0px 0px rgba(255,255,255,0.2)inset;
           box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 0px -1px 0px 0px rgba(255,255,255,0.2)inset;
   border: solid 1px rgba(0,52,129,1);
}
.buttonApple:active {
   background-image: none;
   -webkit-box-shadow: 0px 0px 8px 2px rgba(0,61,127,0.4)inset, 0px 0px 2px 2px rgba(0,60,125,0.2)inset;
      -moz-box-shadow: 0px 0px 8px 2px rgba(0,61,127,0.4)inset, 0px 0px 2px 2px rgba(0,60,125,0.2)inset;
           box-shadow: 0px 0px 8px 2px rgba(0,61,127,0.4)inset, 0px 0px 2px 2px rgba(0,60,125,0.2)inset;
   border: solid 1px rgba(0,70,131,1);
}

Button #5 :

Get This App

HTML :

<a href="#" Class="buttonApp" >Get This App</a>

CSS :

.buttonApp {
   background-image: -webkit-linear-gradient(top, rgba(29,149,224,1) 0%,rgba(6,103,164,1) 100%);
   background-image:    -moz-linear-gradient(top, rgba(29,149,224,1) 0%,rgba(6,103,164,1) 100%);
   background-image:     -ms-linear-gradient(top, rgba(29,149,224,1) 0%,rgba(6,103,164,1) 100%);
   background-image:      -o-linear-gradient(top, rgba(29,149,224,1) 0%,rgba(6,103,164,1) 100%);
   background-image:         linear-gradient(top, rgba(29,149,224,1) 0%,rgba(6,103,164,1) 100%);
   -webkit-box-shadow: 0px 25px 0px 0px rgba(255,255,255,0.08)inset, 0px 0px 0px 1px rgba(255,255,255,0.3)inset;
      -moz-box-shadow: 0px 25px 0px 0px rgba(255,255,255,0.08)inset, 0px 0px 0px 1px rgba(255,255,255,0.3)inset;
           box-shadow: 0px 25px 0px 0px rgba(255,255,255,0.08)inset, 0px 0px 0px 1px rgba(255,255,255,0.3)inset;
   border: solid 1px rgba(9,81,126,1);
   -webkit-border-radius: 26px;
      -moz-border-radius: 26px;
           border-radius: 26px;
   width: 220px;
   display: inline-block;
   font-size: 21px;
   line-height: 50px;
   text-decoration: none;
   text-align: center;
   color: rgba(255,255,255,1);
   font-weight: bold;
   text-shadow: 0px -1px 0px rgba(0,0,0,0.66)
}
.buttonApp:hover {
   background-image: -webkit-linear-gradient(top, rgba(43,165,240,1) 0%,rgba(6,103,164,1) 100%);
   background-image:    -moz-linear-gradient(top, rgba(43,165,240,1) 0%,rgba(6,103,164,1) 100%);
   background-image:     -ms-linear-gradient(top, rgba(43,165,240,1) 0%,rgba(6,103,164,1) 100%);
   background-image:      -o-linear-gradient(top, rgba(43,165,240,1) 0%,rgba(6,103,164,1) 100%);
   background-image:         linear-gradient(top, rgba(43,165,240,1) 0%,rgba(6,103,164,1) 100%);
}
.buttonApp:active {
   -webkit-transform: translateY(1px);
      -moz-transform: translateY(1px);
           transform: translateY(1px);
}

Button #6 :

Download (1.2MB)

HTML :

<a href="#" Class="buttonDownload" >Download (1.2MB)</a>

CSS :

.buttonDownload {
    display: inline-block;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc930), color-stop(100%,#ffa403));
    background: -moz-linear-gradient(center top, #ffc930 0%, #ffa403 100%);
    -webkit-box-shadow: 1px 1px 2px #e6e6e6, 0.5px 1px #ffd96f inset;
    -moz-box-shadow: 1px 1px 2px #e6e6e6, 0.5px 1px #ffd96f inset;
    box-shadow: 1px 1px 2px #e6e6e6, 0.5px 1px #ffd96f inset;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-shadow: 1px 1px 0px #b27b0d;
    padding: 11px 15px;
    border-color: #e39304;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica;
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}
.buttonDownload:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd766), color-stop(100%,#ffa403));
    background: -moz-linear-gradient(center top, #ffd766 0%, #ffa403 100%);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.buttonDownload:active {
    -webkit-box-shadow: 1px 1px 1px 1px #ffa403 inset;
    -moz-box-shadow: 1px 1px 1px 1px #ffa403 inset;
    box-shadow: 1px 1px 1px 1px #ffa403 inset;
}

Button #7 :

Upload

HTML :

<a href="#" Class="buttonUpload" >Upload</a>

CSS :

.buttonUpload {
   background-color: rgba(76,168,0,1);
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWoE2_FwE3L2aGnVjbl0PWXFJ72txaD-sHokVh9SZSKeteklCb6Am3B710no2t3aRtyj4HjcDPAS8dCzRTblo5gqp8GAYv9QL_xHTKdUAXERTUuV_BpS0AAeYyW4P0VkELsQyDwSrFr7E/s1600/upload.png');
   background-repeat: no-repeat;
   background-position: 106px 7px;
   -webkit-box-shadow: 0px 0px 0px 1px rgba(255,255,255,1)inset;
      -moz-box-shadow: 0px 0px 0px 1px rgba(255,255,255,1)inset;
           box-shadow: 0px 0px 0px 1px rgba(255,255,255,1)inset;
   border: solid 1px rgba(76,168,0,1);
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
           border-radius: 3px;
   width: 119px;
   padding: 6px;
   display: inline-block;
   font-size: 13px;
   text-indent: 3px;
   text-decoration: none;
   text-align: left;
   color: rgba(255,255,255,1);
}
.buttonUpload:hover {
   background-color: rgba(69,145,3,1);
}
.buttonUpload:active {
   background-color: rgba(83,176,2,1);
}

Button #8 :
Bookmark Us

HTML :

<a href="#" Class="buttonBookmark" >Bookmark Us</a>

CSS :

.buttonBookmark {
   background-color: rgba(217,24,17,1);
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-bMKDQldMMz9EN7dDKDtAembfsaNLGOZg0CAQQvuNpQ7qnVMF1oRVvIIhPq9npTFH20v1Y9DhOmBcUrUgR74oHqO5u7EAlazu2_IqmohCQcepPM9YR8OCGk9ayt76iLvL2trd1qwaoqU/s1600/bookmark.png');
   background-repeat: no-repeat;
   background-position: 106px 7px;
   -webkit-box-shadow: 0px 0px 0px 1px rgba(240,235,235,1)inset;
      -moz-box-shadow: 0px 0px 0px 1px rgba(240,235,235,1)inset;
           box-shadow: 0px 0px 0px 1px rgba(240,235,235,1)inset;
   border: solid 1px rgba(214,0,0,1);
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
           border-radius: 3px;
   width: 119px;
   padding: 6px;
   display: inline-block;
   font-size: 13px;
   text-decoration: none;
   text-indent: 3px;
   text-align: left;
   color: rgba(255,255,255,1);
}
.buttonBookmark:hover {
   background-color: rgba(212,11,11,1);
}
.buttonBookmark:active {
   background-color: rgba(255,18,18,1);
}

Button #9 :

Push

HTML :

<a href="#" Class="buttonPush" >Push</a>

CSS : 

.buttonPush {
    display: inline-block;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e80000), color-stop(100%,#9c0000));
    background: -moz-linear-gradient(center top, #e80000 0%, #9c0000 100%);
    -webkit-box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
    -moz-box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
    box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
    border-radius: 75px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
    text-shadow: 1px 1px 0px #242424;
    text-align: center;
    font-family: 'K', Sans-serif;
    font-size: 40px;
    line-height: 150px;
    text-decoration: none;
    color: #ffffff;
    width: 150px;
}
.buttonPush:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(100%,#9c0000));
    background: -moz-linear-gradient(center top, #ff0000 0%, #9c0000 100%);
    font-size: 44px;
}
.buttonPush:active {
    -webkit-box-shadow: 0px 2px 0px 0px #6e006e;
    -moz-box-shadow: 0px 2px 0px 0px #6e006e;
    box-shadow: 0px 2px 0px 0px #6e006e;
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px);
}

Button #10 :

Happy

HTML :

<a href="#" Class="buttonHappy" >Happy</a>

CSS :

.buttonHappy {
    display: inline-block;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f48f4c), color-stop(100%,#ef7d31));
    background: -moz-linear-gradient(center top, #f48f4c 0%, #ef7d31 100%);
    -webkit-box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
    -moz-box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
    box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
    text-shadow: 1px 1px 0px #242424;
    text-align: center;
    text-decoration: none;
    font-family: 'K', Sans-serif;
    font-size: 40px;
    line-height: 150px;
    color: #ffffff;
    width: 150px;
}
.buttonHappy:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f79b5e), color-stop(100%,#ef7d31));
    background: -moz-linear-gradient(center top, #f79b5e 0%, #ef7d31 100%);
    font-size: 44px;
}
.buttonHappy:active {
    -webkit-box-shadow: 0px 2px 0px 0px #6e006e;
    -moz-box-shadow: 0px 2px 0px 0px #6e006e;
    box-shadow: 0px 2px 0px 0px #6e006e;
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px);
}

CSS3 Animated Bubble Buttons

First of all you can also use these buttons on your html documents ..... just wanted to let you know :).....so all blogger right now i'am gonna tell you how to use these button on your blog and these are animated so have fun.....

• Go To Blogger > Template > Edit HTML

• Find ]]></b:skin> in your template

• Post the following CSS Code just above  ]]></b:skin>  :

.button{
font:15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
/* The following two rules are fallbacks, in case
  the browser does not support multiple backgrounds. */
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png');
/* Multiple backgrounds version. The background images
  are defined individually in color classes */
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
/* Applying a default border raidus of 8px */
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
/* A 1px highlight inside of the button */
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
/* The first rule is a fallback, in case the browser
  does not support multiple backgrounds
*/
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
/* Moving the button 1px to the bottom when clicked */
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* A more rounded button */
.button.rounded{
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}

/* Defining four button colors */

/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
/* A fallback background color */
background-color: #48b5f2;
/* Specifying a version with gradients according to */
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important; background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important; background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important; background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

• Save Your Template : )

How To Use These Button :

• While editing post click on Edit HTML tab

• Choose your button code below and paste it

• Replace links and link names with yours,

1. HTML Code Large Buttons :

<a href="#" class="button big blue">Big Button</a>
<a href="#" class="button big green">Big Button</a>
<a href="#" class="button big orange">Big Button</a>
<a href="#" class="button big gray">Big Button</a>

2. HTML Code Medium Buttons :

<a href="#" class="button blue medium">Medium Button</a>
<a href="#" class="button green medium">Medium Button</a>
<a href="#" class="button orange medium">Medium Button</a>
<a href="#" class="button gray medium">Medium Button</a>

3. HTML Code Small Buttons :

<a href="#" class="button small blue">Small Button</a>
<a href="#" class="button small green">Small Button</a>
<a href="#" class="button small orange">Small Button</a>
<a href="#" class="button small gray">Small Button</a>

4. HTML Code Round Buttons :

<a href="#" class="button big green rounded">Rounded</a>
<a href="#" class="button small blue rounded">Rounded</a>

• Replace # with link URL

That's It Comment To Join The Dark Side :p

Facebook Like Box Pop Up Widget For Blogger - Version 1.0

You may have seen this on lots of blogs without any doubt because it's so famous around the internet specially in blogger. I have seen lots of tutorial on lots of blogs but this is easiest one here on Widget Craft. Just use our widget generator to get this widget for your blogs.....

First let me explain about fields in generator

• FB Page Username : Fill your fb page username : http://facebook.com/USERNAME

• Pop Up Title : "Join Us On FB!" or anything as you can see in above image.

• Open After : Time after pop up will load

• Close After : Time after pop up will disappear.

• Pop Up Image : Image to display on pop-up , there are four images which are listed below :

Image 1

Image 2

Image3

Image 4

Here you go.....click on Add To Blogger to generate this widget :

HTML And JavaScript Encoder/Decoder

"Link To This Post" Widget Below Posts In Blogger

Everyone loves great content except Usher cuz he loves Bieber content anyways. Last month i posted an article Short URL Widget Below Posts In Blogger which was cool but this one is more easy to add.

• Go To Blogger > Template > Edit HTML > Check 'Expand Widget Template'

• Find <data:post.body/> in your template

Note - If you can't find or add this widget by using <data:post.body/> then find <div class='post-footer-line post-footer-line-1'/> or <div class='post-footer'> and just above it post code given below :

<b:if cond='data:blog.pageType == "item"'>
<p style='color: #7AA1C3;font-weight: bold;'>If you Like This Article,Then kindly linkback to this article by copying one of the codes below.</p>
<p style='color: #CF152A;font-weight: bold;'>URL Of Post:
</p><textarea cols='60' id='url' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #666;background:#fff; height: 2.6em; width: 98%;' title='Click to highlight'><data:post.url/></textarea><br/>
<br/><p style='color: #CF152A;font-weight: bold;'>Paste This HTML Code On Your Page:</p>
<textarea cols='60' id='HTML-code' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #666;background:#fff; height: 2.6em; width: 98%;' title='Click to highlight'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea>
</b:if>

• Save template

Just visit your post and see if it's working.....

HTML5 Email Subscription Form For Blogger

HTML5 is very powerful and stylish as you can see in above image. This email form is way cooler than any other form in this blog + html form validation . I mean it only submit form if a valid email is filled not any other text. Maybe you should give this a try :

• Go To Blogger > Layout > Add A Gadget > HTML/JavaScript

• Just paste code given below

<div id="content">
<h1> Get Free Email Updates  </h1>
<form  action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Q+WidgetCraft', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="hidden" value="WidgetCraft" name="uri" />
<p> <label for="usermail" class="iconic mail-alt"> E-mail address : </label> <input type="email" name="email" id="usermail" placeholder="I promise I hate spam as much as you do" required="required"  /> </p>
<input type="submit" value="  Subscribe !" />    
</form>                          
</div>  
<style>
/** Created And Converted For Blogger By - WidCraft.blogspot.com **/
#container {width:465px; margin:20px auto 0;}
a, a:visited {color:#fff; text-decoration:none; font-size:12px;}
a:hover {text-decoration:underline;}
h1 {
font-family: 'Questrial', Verdana, sans-serif;
text-align:center;
font-size:25px;
padding:0;
margin:0 0 20px 0;
position:relative;
color:#8C8C8C;
}
/** have a nice ampersand **/
h1:after {
font-size:25px;
color:#D6CFCB;
content: '&';
text-align:center;
display:block;
width:100%;
font-family: 'Alice', Verdana, serif;
text-shadow: 0px 1px 0px #fff;
}
/** create the gradient bottom **/
h1:before {
position:absolute;
bottom:15px;
 content: ' ';
 text-align:center;
 display:block;
 height:2px;
 width:100%;
background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(182,180,180,0.7) 42%, rgba(180,178,178,0) 43%, rgba(168,166,166,0) 50%, rgba(180,178,178,0) 57%, rgba(182,180,180,0.7) 58%, rgba(238,237,237,0.3) 90%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(182,180,180,0.7)), color-stop(43%,rgba(180,178,178,0)), color-stop(50%,rgba(168,166,166,0)), color-stop(57%,rgba(180,178,178,0)), color-stop(58%,rgba(182,180,180,0.7)), color-stop(90%,rgba(238,237,237,0.3)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* W3C */
}
/* Here comes to good stuff : content styling */  
#content{
position:relative;
width:400px;
min-height:200px;
z-index:100;
padding:30px;
border:1px solid #383838;
/* My stipped background */
background: #D1D1D1; /* Old browsers */
background: -moz-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
    background: -webkit-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
    background: -o-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
    background: repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
/*border-radius*/
-webkit-border-radius:8px;
   -moz-border-radius:8px;
        border-radius:8px;
/*box-shadow*/
-webkit-box-shadow:0px 1px 6px #3F3F3F;
   -moz-box-shadow:0px 1px 6px #3F3F3F;
        box-shadow:0px 1px 6px #3F3F3F;
}
/** my "fake" background that will hover the stripes **/
#content:after{
background:#F9F9F9;
margin:10px;
position: absolute;
content : " ";
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: -1;
border:1px #E5E5E5 solid;    
/*border-radius*/
-webkit-border-radius:8px;
   -moz-border-radius:8px;
        border-radius:8px;
}
/*** form styling **/
/** we remove the red glow around required fields since we are already using the red star */
input:required, textarea:required {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
}
/** inputs and textarea**/
input:not([type="submit"]), textarea{
outline:none;
display:block;
width:380px;
padding:4px 8px;
border:1px dashed #DBDBDB;
color:#3F3F3F;
font-family:'Droid Sans',Tahoma,Arial,Verdana sans-serif;
font-size:14px;
/*border-radius*/
-webkit-border-radius:2px;
   -moz-border-radius:2px;
        border-radius:2px;
/*transition*/
-webkit-transition:background 0.2s linear,
  box-shadow 0.6s linear;
   -moz-transition:background 0.2s linear,
  box-shadow 0.6s linear;
     -o-transition:background 0.2s linear,
  box-shadow 0.6s linear;
        transition:background 0.2s linear,
  box-shadow 0.6s linear;
}
input:not([type="submit"]):active,
textarea:active,
input:not([type="submit"]):focus,
textarea:focus{
background:#F7F7F7;
border:dashed 1px #969696;
/*box-shadow*/
-webkit-box-shadow:2px 2px 7px #E8E8E8 inset;
   -moz-box-shadow:2px 2px 7px #E8E8E8 inset;
        box-shadow:2px 2px 7px #E8E8E8 inset;
}
input:not([type="submit"]){
height: 20px;
}
/* placeholder */
::-webkit-input-placeholder  {
color:#BABABA;
font-style:italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
color:#BABABA;
font-style:italic;
}
textarea{
min-height:150px;
resize:vertical
}
label{
color:#7F7E7E;
-webkit-transition: color 1s ease;
   -moz-transition: color 1s ease;
   transition: color 1s ease;
}
label:hover{
color:#191919;
}
label:before{
color:#C1BFBD;
-webkit-transition: color 1s ease;
   -moz-transition: color 1s ease;
   transition: color 1s ease;
}
label:hover:before{
color:#969696;
-webkit-transition: color 1s ease;
   -moz-transition: color 1s ease;
   transition: color 1s ease;
}
p{
margin-bottom:20px;
}
.indication{
color:#878787;
font-size:12px;
font-style:italic;
text-align:right;
padding-right:10px;
}
.required{
color:#E5224C;
}
/** Styling the send button **/
input[type=submit]{
margin-left:235px;
cursor:pointer;
background:none;
border:none;
font-family: 'Alice',serif;
color:#767676;
font-size:18px;
padding:10px 4px;
border:1px solid #E0E0E0;
text-shadow: 0px 1px  1px #E8E8E8;
background: rgb(247,247,247);
background: -moz-linear-gradient(top,  rgba(247,247,247,1) 1%, rgba(242,242,242,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(247,247,247,1)), color-stop(100%,rgba(242,242,242,1)));
background: -webkit-linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
background: -o-linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
background: -ms-linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
background: linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
/*box-shadow*/
-webkit-box-shadow:0px 1px 1px #FFF inset,0 0 0px 5px #EAEAEA;
-moz-box-shadow:0px 1px 1px #FFF inset,0 0 0px 5px #EAEAEA;
  box-shadow:0px 1px 1px #FFF inset,0 0 0px 5px #EAEAEA;
/*transition*/
-webkit-transition:all 0.2s linear;
   -moz-transition:all 0.2s linear;
     -o-transition:all 0.2s linear;
        transition:all 0.2s linear;
}
input[type=submit]:hover{
color:#686868;
border-color: #CECECE;
background: rgb(244,244,244);
background: -moz-linear-gradient(top,  rgba(244,244,244,1) 0%, rgba(242,242,242,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,244,1)), color-stop(100%,rgba(242,242,242,1)));
background: -webkit-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
background: -o-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
background: -ms-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
background: linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
/*box-shadow*/
-webkit-box-shadow:0px 1px 1px #FFF inset,0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px 1px 1px #FFF inset,0 0 0px 5px #E0E0E0;
box-shadow:0px 1px 1px #FFF inset,0 0 0px 5px #E0E0E0;    
}
input[type=submit]:active,
input[type=submit]:focus{
position:relative;
top:1px;
color:#515151;
background: rgb(234,234,234);
background: -moz-linear-gradient(top,  rgba(234,234,234,1) 0%, rgba(242,242,242,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,1)), color-stop(100%,rgba(242,242,242,1)));
background: -webkit-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
background: -o-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
background: -ms-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
background: linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
/*box-shadow*/
-webkit-box-shadow:0px -1px 1px #FFF inset,0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px -1px 1px #FFF inset,0 0 0px 5px #E0E0E0;
box-shadow:0px -1px 1px #FFF inset,0 0 0px 5px #E0E0E0;
}
</style>

• Now just replace  WidgetCraft with your feed name.

Example : If you're feed url is feeds.feedburner.com/WidgetCraft then your feed name is WidgetCraft

Any problem with post then please leave a comment

Stylish Email Subscription Forms For Blogger

Get your followers stick to your blog with Rss feed subscription forms and today i'am going to post three amazing forms for your blog and site. No doubt this is the coolest set i have ever seen in my blogging life.

How To Add :

• Go To Blogger > Layout > Add A Gadget > HTML/JavaScript

• Post any of the script given below

Form Code #1 :

<style type="text/css">
#widgetcraft-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNm_2bJkQ2WyCb2LvaewveMbHgYPdX9JY4xr46Pz9DdM5EkR16KkLreyYtLafi-npLnIlVNoISNdhfdjP2RaXlF2sbnCj3DOax-eBxpzc3LpkhcojP7uIOFLN4uPVQ0_pS-l3WnImQ3ZY/s1600/Grey.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
form#widgetcraft-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
form#widgetcraft-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
    outline:0px;
}
form#widgetcraft-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
<div id="widgetcraft-emailbox">
    <form id="widgetcraft-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedURL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="FeedURL" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"
        />
    </form>
</div>

Form Code #2 :

<style type="text/css">
#widgetcraft-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS2FvNzdeFxzd9FvTMjY-sPF5u55qySNRuoTC-HV6q_eN7Hb7zHDpr89U14H_2k1FIWp20ZtMv9alK7ydVQ2eiT0WH0VIG89OFVmuDhIDam3YhlvbbjUu_B1xN_-bMvrlN9EHEwQab-Qk/s1600/Red.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
form#widgetcraft-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
form#widgetcraft-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
    outline:0px;
}
form#widgetcraft-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
<div id="widgetcraft-emailbox">
    <form id="widgetcraft-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedURL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="FeedURL" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"
        />
    </form>
</div>

Form Code #3 :

<style type="text/css">
#widgetcraft-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6PrcgBy84CKypvcx1rEz1CJW5SVSvXewPWiw7kO4x3PgPZ6eU4KbFkZ118TwLNuGJFEfVC_K8oCtHEyoYwxUBn-vrplRo5ZHzK34K4NZvE-HOuIVtMKKteazMzWEZbPGJm2Ja5mN1OqY/s1600/Blue.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
form#widgetcraft-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
form#widgetcraft-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
    outline:0px;
}
form#widgetcraft-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
<div id="widgetcraft-emailbox">
    <form id="widgetcraft-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedURL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="FeedURL" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"
        />
    </form>
</div>

Final step just replace FeedURL with your feed's url.....for example if your feed address is feeds.feedburner.com/WidgetCraft then WidgetCraft is your feedurl.

Smooth jQuery Multi Level Drop Down Menu To Blogger

I posted this menu when i first created this blog but earlier today i mean just 10minutes ago i accidentally deleted that posts so time to write it back again :

• Go to Blogger Dashboard > Design > Layout.

• Click on add a gadget link just below of Header

• Paste below code and save it.

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery,js"></script><script type="text/javascript" src="http://widcraft.googlecode.com/svn/WC-MLMenu,js">
</script>
<script type="text/javascript">
ddsmoothmenu.init({
 mainmenuid: "smoothmenu1", //menu DIV id
 orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu', //class added to menu's outer DIV
 //customtheme: ["#1c5a80", "#18374a"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
 mainmenuid: "smoothmenu2", //Menu DIV id
 orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
 //customtheme: ["#804000", "#482400"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
<style>.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images  ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus  ######### */
.ddshadow{ /*shadow for NON CSS3 capable browsers*/
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
}</style>
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.helperblogger.com/">Home</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>

  </ul>
</li>
<li><a href="http://www.helperblogger.com/">Create This</a></li>
</ul>
<br style="clear: left" />
</div>

Save it and now just replace folder names with your own name and # with links.....sorry i deleted that post.....not intentionally :/ 

Breadcrumb Navigation For Blogger

If you wanna be a pro-blogger then you must need a great navigation on your blog. Just like many famous sites and wordpress you can add a navigation on your blogger which is simply cool.

Let Me Explain :

Above your post title it'll look like this : Home >> Name Of A Label >> Post Title

How To Add :

• Go To Blogger > Template > Edit HTML > Mark 'Expand Widgets Template'
• Press CTRL and F on your keyboard and search for this code:

<b:include data='top' name='status-message'/>

• Right below that paste it :

<b:include data='posts' name='breadcrumb'/>

There may be two occurrences of <b:include data='top' name='status-message'> in your template, you should do the same thing if there’s a second one.

• Now search for this code:

<b:includable id='main' var='top'>

• Just above it, paste this code:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Now time to add some css....you can add below css or change it with custom css if you know any thing about css.

• Search for ]]></b:skin>

• Just above it post following CSS

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:90%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
font-weight:bold;
}

OK almost done....now time for final and most important step

• Save The Template

Now it's done.....if you're facing any problems then please let me know.....Thanks!!