Add 4 Stylish 3D buttons to Blogger blogs

Someday ago I published a cool post featuring 5 cool CSS3 shaking button for Blogger blogs; Here I am publishing another super duper button base post go by the title of add 4 stylish 3D buttons to Blogger. These buttons made with 3D CSS3 Perspective formula. Looks modern and easy to add and configure. These buttons you can use in post for Linking (Download now, Submit now or Subscribe). Let’s see how they looks like and how to add; Read on:-

Add 4 Stylish 3D buttons to Blogger blogs

Live Demo: (Click Here)

1. Downwards

Preview:

Codes:

<style>
@import url(http://fonts.googleapis.com/css?family=Roboto);
/*crawlist.net CSS starts*/
.ks{
    border:none;
    position:relative;
    background:none;
    padding:22px 80px;
    display:inline-block;
    text-transform:uppercase;
    margin:15px 30px;
    color:inherit;
    letter-spacing:2px;
    font-size:1em;
    outline:none;
    -moz-transition:all 0.4s;
    -webkit-transition:all 0.4s;
    transition:all 0.4s;
    cursor:pointer;
}
.ks_perspective a {    color:#fff;
    text-decoration:none;
    font-family: 'Roboto', sans-serif;   
}
.ks_perspective a:hover {     color:#fff;
    text-decoration:none;   
}
.ks:after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-transition:all 0.4s;
    -moz-transition:all 0.4s;
    transition:all 04.s;
}
.ks_perspective{
    -webkit-perspective:800px;
    -moz-perspective:800px;
    perspective:800px;
    display:inline-block;
}
.ks-3d{
    display:block;
    background:#5cbcf6;
    outline:1px solid transparent;
    transform-style:preserve-3d;
}
.ks-3d:active{
    background:#55b7f3;  
}
.ks-3da:after{
    width:100%;
    height:42%;
    left:0;
    top:-40%;
    background:#53a6d7;
    transform-origin:0% 100%;
    transform:rotateX(90deg);
  
   
}
.ks-3da:hover{
    transform: rotateX(-45deg);  
}
/*crawlist.net CSS ends*/
</style>
    <p class="ks_perspective">
   <a class="ks ks-3d ks-3da" href="http://google.com" target="_blank">Submit</a>
    </p>  

2. Upwards

Preview:

Codes:

<style>
@import url(http://fonts.googleapis.com/css?family=Roboto);
/*crawlist.net CSS starts*/
.ks{
    border:none;
    position:relative;
    background:none;
    padding:22px 80px;
    display:inline-block;
    text-transform:uppercase;
    margin:15px 30px;
    color:inherit;
    letter-spacing:2px;
    font-size:1em;
    outline:none;
    -moz-transition:all 0.4s;
    -webkit-transition:all 0.4s;
    transition:all 0.4s;
    cursor:pointer;
}
.ks_perspective a {    color:#fff;
    text-decoration:none;
    font-family: 'Roboto', sans-serif;
}
.ks_perspective a:hover {     color:#fff;
    text-decoration:none;   
}
.ks:after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-transition:all 0.4s;
    -moz-transition:all 0.4s;
    transition:all 04.s;
}
.ks_perspective{
    -webkit-perspective:800px;
    -moz-perspective:800px;
    perspective:800px;
    display:inline-block;
}
.ks-3d{
    display:block;
    background:#5cbcf6;
    outline:1px solid transparent;
    transform-style:preserve-3d;
}
.ks-3d:active{
    background:#55b7f3;  
}
.ks-3db:after{
    width:100%;
    height:40%;
    left:0;
    top:100%;
    background:#53a6d7;
    transform-origin: 0% 0%;
    transform:rotateX(-90deg);
}
.ks-3db:hover{
    transform:rotateX(35deg);  
}
/*crawlist.net CSS ends*/
</style>
    <p class="ks_perspective">
   <a class="ks ks-3d ks-3db" href="http://google.com" target="_blank">Submit</a>
    </p>  

3. Left to right

Preview:

Codes:

<style>
@import url(http://fonts.googleapis.com/css?family=Roboto);
/*crawlist.net CSS starts*/
.ks{
    border:none;
    position:relative;
    background:none;
    padding:22px 80px;
    display:inline-block;
    text-transform:uppercase;
    margin:15px 30px;
    color:inherit;
    letter-spacing:2px;
    font-size:1em;
    outline:none;
    -moz-transition:all 0.4s;
    -webkit-transition:all 0.4s;
    transition:all 0.4s;
    cursor:pointer;
}
.ks_perspective a {    color:#fff;
    text-decoration:none;
    font-family: 'Roboto', sans-serif;   
}
.ks_perspective a:hover {     color:#fff;
    text-decoration:none;   
}
.ks:after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-transition:all 0.4s;
    -moz-transition:all 0.4s;
    transition:all 04.s;
}
.ks_perspective{
    -webkit-perspective:800px;
    -moz-perspective:800px;
    perspective:800px;
    display:inline-block;
}
.ks-3d{
    display:block;
    background:#5cbcf6;
    outline:1px solid transparent;
    transform-style:preserve-3d;
}
.ks-3d:active{
    background:#55b7f3;  
}
.ks-3dc:after{
    width:20%;
    height:100%;
    left:-20%;
    top:0;
    background:#53a6d7;
    -webkit-transform-origin:100% 0%;
    -webkit-transform:rotateY(-90deg);
    -moz-transform-origin:100% 0%;
    -moz-transform:rotateY(-90deg);
    -ms-transform-origin:100% 0%;
    -ms-transform:rotateY(-90deg);
    transform-origin:100% 0%;
    transform:rotateY(-90deg);
}
.ks-3dc:hover{
    transform:rotateY(25deg);  
}
/*crawlist.net CSS ends*/
</style>
    <p class="ks_perspective">
   <a class="ks ks-3d ks-3dc" href="http://google.com" target="_blank">Submit</a>
    </p>  

4. Right to left

Preview:

Codes:

<style>
@import url(http://fonts.googleapis.com/css?family=Roboto);
/*crawlist.net CSS starts*/
.ks{
    border:none;
    position:relative;
    background:none;
    padding:22px 80px;
    display:inline-block;
    text-transform:uppercase;
    margin:15px 30px;
    color:inherit;
    letter-spacing:2px;
    font-size:1em;
    outline:none;
    -moz-transition:all 0.4s;
    -webkit-transition:all 0.4s;
    transition:all 0.4s;
    cursor:pointer;
}
.ks_perspective a {    color:#fff;
    text-decoration:none;
    font-family: 'Roboto', sans-serif;
}
.ks_perspective a:hover {     color:#fff;
    text-decoration:none;   
}
.ks:after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-transition:all 0.4s;
    -moz-transition:all 0.4s;
    transition:all 04.s;
}
.ks_perspective{
    -webkit-perspective:800px;
    -moz-perspective:800px;
    perspective:800px;
    display:inline-block;
}
.ks-3d{
    display:block;
    background:#5cbcf6;
    outline:1px solid transparent;
    transform-style:preserve-3d;
}
.ks-3d:active{
    background:#55b7f3;  
}
.ks-3dd:after{
    width:20%;
    height:100%;
    left:100%;
    top:0;
    background:#53a6d7;
    -webkit-transform-origin:0% 0%;
    -webkit-transform:rotateY(90deg);
    -moz-transform-origin:0% 0%;
    -moz-transform:rotateY(90deg);
    -ms-transform-origin:0% 0%;
    -ms-transform:rotateY(90deg);
    transform-origin:0% 0%;
    transform:rotateY(90deg);
}
.ks-3dd:hover{
    -webkit-transform:rotateY(-15deg);
    -moz-transform:rotateY(-15deg);
    -ms-transform:rotateY(-15deg);
    transform:rotateY(-15deg);
}
/*crawlist.net CSS ends*/
</style>
    <p class="ks_perspective">
   <a class="ks ks-3d ks-3dd" href="http://google.com" target="_blank">Submit</a>
    </p>

How to add:
When you writing post, Switch HTML part (Compose/HTML), And paste your desired button’s code, in 'Google.com' replace your link, and change ‘Submit word with any word you want, Go back to Compose part to continue.

Compatibility

• Any web browser’s latest version will support these buttons (except-IE)

• Any template will support these button; if doesn’t remove them.

So, any feedback leave with comment, I will publish cooler stuff for bloggers soon stay touch. Chill…..