3 Responsive Navigation menus for Blogger

Recently I published high-end CSS3 made 2 different hover styled navigation menu also I published a cool multipurpose dropdown menu too. But none one of them are responsive. Those menu works fine on non-responsive template but if you using responsive template (adapts any screen size, tabs and mobile phone) also you turned off default mobile view on mobile devices then those menu using is worthless. That case we use responsive navigation bars. For your consideration here I am publishing 3 of coolest responsive navigation bars for your responsive templates. They doesn’t come up with dropdown menu but coming soon (working on that), made with CSS, HTML, CSS3 and jQuery. Let’s see how they look like and how to add them on your Blogger blog.

Black responsive navigation menu

Black oriented gradient colored; equipped with cool CSS3 transition effect, Google font.

Live demo: (Click here)

Codes:

<div id='ks-pluto'>
<ul><!--crawlist.net menu starts-->
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Tutorials</span></a></li>
   <li><a href='#'><span>Customization</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul><!--crawlist.net menu ends-->
</div>


<style>/*crawlist.net CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@charset "UTF-8";
/* Base Styles */
#ks-pluto ul,
#ks-pluto li,
#ks-pluto a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: 'Lato', sans-serif;
}
#ks-pluto {
  border: 1px solid #000000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  width: auto;
}
#ks-pluto ul {
  zoom: 1;
  background: #47474e;
  background: -moz-linear-gradient(top, #47474e 0%, #2f2f33 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #47474e), color-stop(100%, #2f2f33));
  background: -webkit-linear-gradient(top, #47474e 0%, #2f2f33 100%);
  background: -o-linear-gradient(top, #47474e 0%, #2f2f33 100%);
  background: -ms-linear-gradient(top, #47474e 0%, #2f2f33 100%);
  background: linear-gradient(top, #47474e 0%, #2f2f33 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
  padding: 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#ks-pluto ul:before {
  content: '';
  display: block;
}
#ks-pluto ul:after {
  content: '';
  display: table;
  clear: both;
}
#ks-pluto li {
  float: left;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}
#ks-pluto li a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 15px 9px 15px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid transparent;
  font-size: 16px;
  -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
#ks-pluto li.active {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #47474e;
}
#ks-pluto li.active a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #171718;
  border: 1px solid #000000;
  -moz-box-shadow: inset 0 5px 10px #000000;
  -webkit-box-shadow: inset 0 5px 10px #000000;
  box-shadow: inset 0 5px 10px #000000;
}
#ks-pluto li:hover {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #47474e;
}
#ks-pluto li:hover a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #171718;
  border: 1px solid #000000;
  -moz-box-shadow: inset 0 5px 10px #000000;
  -webkit-box-shadow: inset 0 5px 10px #000000;
  box-shadow: inset 0 5px 10px #000000;
}
/*crawlist.net CSS ends*/
@media screen and (max-width: 768px) {
    #ks-pluto li {
  float: none;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}   
}
</style>

Black and blue responsive navigation menu

Faded black (flat) colored, equipped with cool CSS3 transition effect, Google font and blue underline appears on link hover.

Live demo: (Click here)

Codes:

<div id='ks-menu'>
<ul><!--crawlist.net menu starts-->
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Tutorials</span></a></li>
   <li><a href='#'><span>Customization</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul><!--crawlist.net menu ends-->
</div>


<style>/*crawlist.net CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);

#ks-menu {background: #333;
  width: auto;
}

#ks-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.4;
  display: block;
  zoom: 1;
}
#ks-menu ul:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#ks-menu ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}
#ks-menu.align-right ul li {
  float: right;
}
#ks-menu.align-center ul {
  text-align: center;
}
#ks-menu ul li a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  text-transform: capitalize;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#ks-menu ul li a:hover {
  color: #fff;
}
#ks-menu ul li a:hover:before {
  width: 100%;
}
#ks-menu ul li a:after {
  content: "";
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#ks-menu ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background:#3CF;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#ks-menu ul li.last > a:after,
#ks-menu ul li:last-child > a:after {
  display: none;
}
#ks-menu ul li.active a {
  color: #f5f5f5;
}
#ks-menu ul li.active a:before {
  width: 100%;
}
#ks-menu.align-right li.last > a:after,
#ks-menu.align-right li:last-child > a:after {
  display: block;
}
#ks-menu.align-right li:first-child a:after {
  display: none;
}
/*crawlist.net CSS ends*/
@media screen and (max-width: 768px) {
  #ks-menu {  -moz-box-shadow: 2px 2px 5px #d5d5d5;
-webkit-box-shadow: 2px 2px 5px #d5d5d5;
box-shadow: 2px 2px 5px #d5d5d5;

}

  #ks-menu ul li {
    float: none;
    display: block;

  }
  #ks-menu ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #fff;
          -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
  }
  #ks-menu ul li a:hover {
      -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #fff;
    background:#4c4c4c;
  } 
  #ks-menu ul li.last > a,
  #ks-menu ul li:last-child > a {
    border: 0;
  }
  #ks-menu ul li a:after {
    display: none;
  }
  #ks-menu ul li a:before {
    display: none;
  }
}
</style>

 

Ocean blue responsive navigation menu

Blue oriented gradient colored; equipped with foldable jQuery featured touch menu on mobile, Google font. 

Live demo: (Click here)

Codes:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>/*crawlist.net CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  border-radius: 4px;
  border: 1px solid #2698e9;
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 1;
  background: #6bb9f0;
  background: -webkit-linear-gradient(bottom, #54aeee, #82c4f2);
  background: -ms-linear-gradient(bottom, #54aeee, #82c4f2);
  background: -moz-linear-gradient(bottom, #54aeee, #82c4f2);
  background: -o-linear-gradient(bottom, #54aeee, #82c4f2);
  background: linear-gradient(to top, #54aeee, #82c4f2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), inset 0 -2px 0px #46a7ec, inset 0 1px 0 #90cbf4;
 
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 20px 25px 21px 25px;
  font-size: 15px;
  text-decoration: none;
  color: #fcfefb;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
#cssmenu > ul > li:first-child > a {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
#cssmenu.align-center > ul > li:first-child > a {
  border-radius: 0;
}
#cssmen.align-right > ul > li:first-child > a {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
  color: #444444;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  background: rgba(125, 125, 125, 0.04);
}
#cssmenu > ul > li:after {
  content: '';
  position: absolute;
  top: 18px;
  right: 0;
  display: block;
  height: 20px;
  width: 1px;
  opacity: .15;
  background: rgba(0, 0, 0, 0.7);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
}
#cssmenu.align-right > ul > li:after {
  right: auto;
  left: -1px;
}
#cssmenu > ul > li:before {
  content: '';
  position: absolute;
  top: 18px;
  right: -1px;
  display: block;
  height: 20px;
  width: 1px;
  opacity: .35;
  background: rgba(255, 255, 255, 0.8);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.01), #ffffff, rgba(255, 255, 255, 0.01));
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
}
#cssmenu.align-right > ul > li:before {
  right: auto;
  left: 0px;
}
#cssmenu > ul > li:last-child:after,
#cssmenu > ul > li:last-child:before {
  display: none;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li > a {
  padding: 18px 25px;
}
#cssmenu.small-screen > ul > li:after,
#cssmenu.small-screen > ul > li:before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 18px 25px 19px 25px;
  cursor: pointer;
  font-size: 15px;
  text-decoration: none;
  color: #fcfefb;
}
#cssmenu.small-screen #menu-button.menu-opened {
  color: #444444;
}
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 20px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #fcfefb;
  border-bottom: 2px solid #fcfefb;
  width: 18px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #444444;
  border-bottom: 2px solid #444444;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 25px;
  top: 30px;
  display: block;
  width: 18px;
  height: 2px;
  background: #fcfefb;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #444444;
}/*crawlist.net CSS ends*/
</style>
   
<div id='cssmenu'>
<ul><!--crawlist.net menu starts-->
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Tutorials</a></li>
   <li><a href="#">Customization</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
</ul><!--crawlist.net menu ends-->
</div>

<script>
(function($) {

  $.fn.menumaker = function(options) {
     
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        breakpoint: 768,
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.find('li ul').parent().addClass('has-sub');
        if (settings.format != 'select') {
          cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
          $(this).find("#menu-button").on('click', function(){
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) {
              mainmenu.hide().removeClass('open');
            }
            else {
              mainmenu.show().addClass('open');
              if (settings.format === "dropdown") {
                mainmenu.find('ul').show();
              }
            }
          });

          multiTg = function() {
            cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
            cssmenu.find('.submenu-button').on('click', function() {
              $(this).toggleClass('submenu-opened');
              if ($(this).siblings('ul').hasClass('open')) {
                $(this).siblings('ul').removeClass('open').hide();
              }
              else {
                $(this).siblings('ul').addClass('open').show();
              }
            });
          };

          if (settings.format === 'multitoggle') multiTg();
          else cssmenu.addClass('dropdown');
        }

        else if (settings.format === 'select')
        {
          cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
          var selectList = cssmenu.find('select');
          selectList.append('<option>' + settings.title + '</option>', {
                                                         "selected": "selected",
                                                         "value": ""});
          cssmenu.find('a').each(function() {
            var element = $(this), indentation = "";
            for (i = 1; i < element.parents('ul').length; i++)
            {
              indentation += '-';
            }
            selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
          });
          selectList.on('change', function() {
            window.location = $(this).find("option:selected").val();
          });
        }

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($(window).width() > settings.breakpoint) {
            cssmenu.find('ul').show();
            cssmenu.removeClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').hide();
            }
            else {
              cssmenu.find("#menu-button").removeClass("menu-opened");
            }
          }

          if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
            cssmenu.find('ul').hide().removeClass('open');
            cssmenu.addClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').show();
            }
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery);

(function($){
$(document).ready(function(){

$(document).ready(function() {
  $("#cssmenu").menumaker({
    title: "Menu",
    format: "dropdown"
  });
});

});
})(jQuery);
</script>

How to add:

• Log into your Blogger blog; select your blog

• Go to 'Layout' tab; click 'add a gadget’, see image

• Select 'html/javascript' from Pop-up menu,

• Copy following codes and configure

How to configure:

• Change # with your label link and title word with your label name

• Save template; and check your blog out for live preview.

Compatibility

• These navigation menus are compatible with any default and standard designed template. If its design breaks on any template remove it.

• These menus are compatible with any updated Web browser.

Caution

• Make sure your template has this line in <head> area

<meta name="viewport" content="width=device-width, initial-scale=1">

• If your template already has this line, don’t copy twice (For Third number menu) 

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

So what your feedback about these menu don’t forget to mention, Goodluck……

Read More

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…..

Read More

7 Best Feedback & Online Help desk software/scripts

If you needs to know what your site/service users thinks about your web project you may be go for contact form or forum discussion system. But those methods are kind of old schooled for high-end and customer base sites. In that case Feedback & Online Help desk software can help you a lot; cause these programs are developed for instantly collect feedback from customers/visitors and prioritize feedback from customers who are allows posting issues or suggestions, and others vote the feedback up or down. So as admin of site/project you will get a future reference about your service/product also you can take direct action based on feedback you getting. Here in this list I am gathered the best 7 Feedback & Online Help desk software/scripts; read on and place them on your site.

7 Best Free & Open-Source Feedback & Online Help desk software/scripts

User Voice
UserVoice makes Product Management & Customer Support Software to help companies build better products and support their users; UserVoice communities are the easiest way to turn customer feedback into action: 1. Share ideas. 2. Vote up the best. 3. Respond, implement & repeat. This program offers Custom Look & Feel, Idea & Comment Moderation, Personalized Views and Notifications, Terms of Service, Multi-Language and Mobile Support, Private Forums.

Get Satisfaction
Get Satisfaction is Comprehensive customer community software. Allow customers to connect with companies and other customers. It provides a variety of plans for enterprises and small organizations. Features; Use case configuration: Use conversation types (questions, problems, ideas, and praise), Self-service customer support capabilities. Deflect customer support cases while helping customers get faster answers to questions, Customer feedback capabilities, Gamification features. Recognize and reward experts, Design a customer community that is a natural extension of your online presence, build in SEO, Social media integration, Multi language, Mobile optimization.

Use response
All-in-one Support Suite Gather ideas, organize online documentation and provide support with customer feedback software, help desk system packed in one simple solution. It features; Build Your Plan Based on Collected Ideas & Questions, Self-Service Community, Social Networks integration, Email Requests, Widgets, Live Chat, Restful API, Private Requests, Announcements , Moderation, Files & Attachments, Customized Reports & Analytics, Polls, Dashboard & User Cards, canned responses , Custom Fields & Properties.

Freshdesk
Freshdesk is award-winning, online help desk software that allows you to support customers over email, phone, the web or even through Twitter and your company's Facebook page along with Email ticketing, Reusable replies with canned responses, Add tags to tickets, solutions and contacts, Time tracking, Integrated customer satisfaction surveys, Multi-Channel support,  Agent collision detection, Helpdesk automation, SLA management, SEO optimization, Mobile customer support iOS, Android, Mobile optimized HTML5 app, Multi-language, Customizable popup and embedded Feedback widget, reporting, Customizations (CSS, Layouts) , Security SSL, Email marketing.

User Echo
User Echo is basically a customer and community platform that provides voting, social networking integration and user moderators. It is reliable tool for driving product innovation and improves your customer service experience, as claimed by its developers. With this utility you can simply organize customer feedback, employ ticketing support system with private topics and even live chat with clients. A couple of other aspects include merging topics, voting on comments, voting for topics, private discussions, ordering and filtering, subcategories, full text search and topics tagging.

Userrules
UserRules empowers your users to submit views & ideas, discuss and share opinions, vote and take part in polls, discuss and track relevant issues and follow on feedback for your company and gives you single interface to manage your community forum, customer-support platform and user analytics all in one place. Also offers Ease of Integration, Facebook Integration, ins and out Customizations.

Idea Informer
Idea Informer is a powerful feedback management tool. It's a platform for putting together your visitors' ideas and recommendations on your project. Instead of conducting expensive research, ask your users what they really want. The tool allows users leave comments on one’s website via an interactive widget. Idea Informer also caters a free feedback extension for Joomla CMS.

Keeping touch with your customers and service user is very important and using Feedback/Online Help desk software on website solves that big problem without tension. So which one you will be using don’t forget to mention.

Read More