Sharrre

← Back to Sharrre home

Example 2

Code

  1. <div id="example2">
  2.   <div id="shareme" data-url="http://sharrre.com/" data-text="Make your sharing widget with Sharrre (jQuery Plugin)"></div>
  3. </div>
  4. <script>
  5. $('#shareme').sharrre({
  6.   share: {
  7.     twitter: true,
  8.     facebook: true,
  9.     googlePlus: true
  10.   },
  11.   template: '<div class="box"><div class="left">Share</div><div class="middle"><a href="#" class="facebook">f</a><a href="#" class="twitter">t</a><a href="#" class="googleplus">+1</a></div><div class="right">{total}</div></div>',
  12.   enableHover: false,
  13.   enableTracking: true,
  14.   render: function(api, options){
  15.   $(api.element).on('click', '.twitter', function() {
  16.     api.openPopup('twitter');
  17.   });
  18.   $(api.element).on('click', '.facebook', function() {
  19.     api.openPopup('facebook');
  20.   });
  21.   $(api.element).on('click', '.googleplus', function() {
  22.     api.openPopup('googlePlus');
  23.   });
  24. }
  25. });
  26. </script>
  27. <style type="text/css">
  28.   #example2{
  29.     float:left;
  30.     margin:80px 42% 0 42%;
  31.   }
  32.   .sharrre .box{
  33.     background:#6f838c;
  34.     background:-webkit-gradient(linear,left top,left bottom,color-stop(#6f838c,0),color-stop(#4d5e66,1));
  35.     background:-webkit-linear-gradient(top, #6f838c 0%, #4d5e66 100%);
  36.     background:-moz-linear-gradient(top, #6f838c 0%, #4d5e66 100%);
  37.     background:-o-linear-gradient(top, #6f838c 0%, #4d5e66 100%);
  38.     background:linear-gradient(top, #6f838c 0%, #4d5e66 100%);
  39.     filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f838c', endColorstr='#4d5e66',GradientType=0 );
  40.     -webkit-box-shadow:0 1px 1px #d3d3d3;
  41.     -moz-box-shadow:0 1px 1px #d3d3d3;
  42.     box-shadow:0 1px 1px #d3d3d3;
  43.     height:22px;
  44.     display:inline-block;
  45.     position:relative;
  46.     padding:0px 55px 0 8px;
  47.     -webkit-border-radius:3px;
  48.     -moz-border-radius:3px;
  49.     border-radius:3px;
  50.     font-size:12px;
  51.     float:left;
  52.     clear:both;
  53.     overflow:hidden;
  54.     -webkit-transition:all 0.3s linear;
  55.     -moz-transition:all 0.3s linear;
  56.     -o-transition:all 0.3s linear;
  57.     transition:all 0.3s linear;
  58.   }
  59.   .sharrre .left{
  60.     line-height:22px;
  61.     display:block;
  62.     white-space:nowrap;
  63.     text-shadow:0px 1px 1px rgba(255,255,255,0.3);
  64.     color:#ffffff;
  65.     -webkit-transition:all 0.2s linear;
  66.     -moz-transition:all 0.2s linear;
  67.     -o-transition:all 0.2s linear;
  68.     transition:all 0.2s linear;
  69.   }
  70.   .sharrre .middle{
  71.     position:absolute;
  72.     height:22px;
  73.     top:0px;
  74.     right:30px;
  75.     width:0px;
  76.     background:#63707e;
  77.     text-shadow:0px -1px 1px #363f49;
  78.     color:#fff;
  79.     white-space:nowrap;
  80.     text-align:left;
  81.     overflow:hidden;
  82.     -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
  83.     -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
  84.     box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
  85.     -webkit-transition:width 0.3s linear;
  86.     -moz-transition:width 0.3s linear;
  87.     -o-transition:width 0.3s linear;
  88.     transition:width 0.3s linear;
  89.   }
  90.   .sharrre .middle a{
  91.     color:#fff;
  92.     font-weight:bold;
  93.     padding:0 9px 0 9px;
  94.     text-align:center;
  95.     float:left;
  96.     line-height:22px;
  97.     -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
  98.     -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
  99.     box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
  100.   }
  101.   .sharrre .right{
  102.     position:absolute;
  103.     right:0px;
  104.     top:0px;
  105.     height:100%;
  106.     width:45px;
  107.     text-align:center;
  108.     line-height:22px;
  109.     color:#4b5d61;
  110.     background:#f1faf9;
  111.     background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1faf9,0),color-stop(#bacfd2,1));
  112.     background:-webkit-linear-gradient(top, #f1faf9 0%, #bacfd2 100%);
  113.     background:-moz-linear-gradient(top, #f1faf9 0%, #bacfd2 100%);
  114.     background:-o-linear-gradient(top, #f1faf9 0%, #bacfd2 100%);
  115.     background:linear-gradient(top, #f1faf9 0%, #bacfd2 100%);
  116.     filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1faf9', endColorstr='#bacfd2',GradientType=0 );
  117.   }
  118.   .sharrre .box:hover{
  119.     padding-right:130px;
  120.   }
  121.   .sharrre .middle a:hover{
  122.     text-decoration:none;
  123.   }
  124.   .sharrre .box:hover .middle{
  125.     width:90px;
  126.   }
  127. </style>
  128.

Source

Inspired by this CSS3 example.