July 18, 2015

Saturday, July 18, 2015
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:
Stylish 3D buttons
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:
Stylish 3D buttons


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:
Stylish 3D buttons

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:
Stylish 3D buttons
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…..

0 comments:

Post a Comment

 
Copyright © 2013-16 Crawlist All Right Reserved
Designed By Me {K.Shazzad}