CandyRoid: How to add CSS3 Gradient Buttons With Shiny Spinning Effect of Different Colour to Your Post..

Many Of you may have Searched before or Searching Now for Download or Demo or Whatever Buttons to use in your Blogger post or Website post.. In my Before Post I have Shared My Own Widget Created for the First time Using CSS3.. So Today I am Going to share A Beautiful CSS3 Gradient Buttons With Shiny Spinning Effect With Multicolor Buttons..

Live Demo

So are you happy or curious to add this Awesome CSS3 Gradient Buttons With Shiny Spinning Effect to you Blog or Website post?? Then Let's begin.. Now I will Explain How to add this to your Blogger Post..Just follow Simple Steps Mentioned Below..

How to add CSS3 Gradient Buttons :

First Go to Blogger and Go to Your Blogger Dashboard..
Now Go to Template Section Which is in Left Side of your Blogger Dashboard..
Before Clicking On Edit HTML Backup your Template by Clicking "Backup/Restore" which is in Right side Top of your Blogger Dashboard..
Now click on "Download Template" so that if any problem persist after editing template you can restore it..
After Backup of your Template now click on "Edit HTML"..
Now find "]]></b:skin>" by clicking "Ctrl+F" in your Blogger Template Codes..
Now place Below Set of CSS Code above "]]></b:skin>"..

/*****************************************************************************************************************
   Start of Css3 Gradient Shiny Spinning Effect Button by .:candyroid Tech:.
******************************************************************************************************************/
.candyroid-button{
   height:2em;
   padding:15px 50px;
   margin:20px 40px;
   cursor:pointer;
   display:inline-block;
   color:#FFF !important;
   font-size:1em;
   border:1px solid #eee;
   background:#eee;
   border-radius:4px;
   line-height:2em;
   border:1px solid #aaa;
   text-decoration:none;
   -webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}
/********************************************************
          Green Background
*********************************************************/
.green{
   background: #cdeb8e; /* Old browsers */
   background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* IE10+ */
   background: linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); /* IE6-9 */
}
/***********************************************************
            Red Background
***********************************************************/
.red{
   background: #ff3019; /* Old browsers */
   background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
   background: linear-gradient(top, #ff3019 0%,#cf0404 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}
/*************************************************
           Yellow Background
************************************************/
.yellow{
   background: #ffd65e; /* Old browsers */
   background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* IE10+ */
   background: linear-gradient(top, #ffd65e 0%,#febf04 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
}
/******************************************
             Grey Background
******************************************/
.grey{
   background: rgb(238,238,238); /* Old browsers */
   background: -moz-linear-gradient(left, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
   background: linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */
}
/******************************************
        Black Background
******************************************/
.black{
   background: #7d7e7d; /* Old browsers */
   background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
   background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}
/******************************************
        Brown Background
******************************************/
.brown{
   background: #f6e6b4; /* Old browsers */
   background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */
   background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}
/**********************************************
            Blue Background
**********************************************/
.blue{
   background: #7abcff; /* Old browsers */
   background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
   background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
}
/*****************************************
      Dark Red Background
*****************************************/
.darkred{
   background: rgb(169,3,41); /* Old browsers */
   background: -moz-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */
   background: linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 */
}
/*******************************************
             Purple Background
*******************************************/
.purple{
   background: rgb(203,96,179); /* Old browsers */
   background: -moz-linear-gradient(left, rgba(203,96,179,1) 0%, rgba(173,18,131,1) 50%, rgba(222,71,172,1) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(203,96,179,1)), color-stop(50%,rgba(173,18,131,1)), color-stop(100%,rgba(222,71,172,1))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* IE10+ */
   background: linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=1 ); /* IE6-9 */
}
.candyroid-button:hover{
   -webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
     -khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
       -moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
         -o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
            box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
.candyroid-button:active {
    -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
     -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
       -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
         -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
    text-shadow:1px 1px 1px #eee;
}
.light {
    display: block;
    position: relative;
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, 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(50%,rgba(255,255,255,0.9)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
   background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    padding: 1px 9px;
    top: -16px;
    left: -53px;
    height: 0px;
}
.candyroid-button:hover .light{
   padding:1px 5px;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    -khtml-animation-name: shine;
    -khtml-animation-duration: 0.6s;
    -khtml-animation-timing-function: linear;
    -moz-animation-name: shine;
    -moz-animation-duration: 0.6s;
    -moz-animation-timing-function: linear;
    -o-animation-name: shine;
    -o-animation-duration: 0.6s;
    -o-animation-timing-function: linear;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    left:45px;
}
@-webkit-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -webkit-transform: rotate(-360deg); }
}
@-khtml-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -khtml-transform: rotate(-360deg); }
}
@-moz-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -moz-transform: rotate(-360deg); }
}
@-o-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -o-transform: rotate(-360deg); }
}
@-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; transform: rotate(-360deg); }
}
/*************************************************************************************************
   End of Css3 Gradient Shiny Spinning Effect Button by .:candyroid Tech:.
**************************************************************************************************/

Now Click On Save Template..

How to use This Code in Posts:

To add This Buttons in Post go to HTML Part of your Post and Add this below code According to your Color..

Green Button

Red Button

Blue Button

Yellow Button

Grey Button

Black Button

Brown Button

Dark Red Button

Purple Button

That's it ..All Done!!..

Customization :

Now Replace "URL Here" Text Highlighted Red with your Link..
And Replace "Your Text" in pink with Download or Demo or What ever you want..

Useful Note:

You can Also Edit this menu like Width,Colour etc using HTML Editor of our Blog : HTML Editor..
You can Use Hexadecimal Color Code Generator to Replace Colors of our Blog : HexaDecimal Color Code Generator..

Important Note:

You Can Comment If any Problem Persist..

I hope you have found this post helpful..

Don't forget to Subscribe , Comment and Share this post..

With Regard's ,

Manjunath.G..

.:candyroid Tech:.

CandyRoid

Sunday, 5 May 2013

How to add CSS3 Gradient Buttons With Shiny Spinning Effect of Different Colour to Your Post..

No comments:

Post a Comment