addThis Sharing Buttons for Wordpress, how to anim

问题:

I'm looking for a plugin/code that can give some nice mouse hover animation over addThis share buttons, but still want to enjoy the 1-click tweet,like,etc. feature of addThis default buttons.

The one i have now is default, looks like,

What i want is something similar to the one used in arduino.cc blog, the default 1-click buttons are hidden by default and get visible only on mouse hover. eg:-

How can i achieve this?

回答1:

You can do this placing custom Images with actual sharing buttons together. Keep all the sharing button width 0 by default and make them visible on hover by increasing width. Also add CSS transition to expend the buttons smoothly.

Consider this example.

.sharing-buttons {
  float: left;
  margin: 5px;
}
.share-button {
  float: right;
  margin-left: 5px;
  overflow: hidden;
  transition: all 0.6s ease 0s;
  white-space: nowrap;
  width: 0;
}
.sharing-buttons:hover .share-button {
  width: 100px;
}

<div id="wrapper">
  <div class="sharing-buttons fb">
    <a href="#">Custom Image</a>
    <div class="share-button">Button iframe</div>
  </div>
  <div class="sharing-buttons tw">
    <a href="#">Custom Image</a>
    <div class="share-button">Button iframe</div>
  </div>
</div>

Edit: Final addThis code & CSS

.addthis_toolbox a.at300b, .addthis_toolbox a.at300m {
	padding: 5px;
	width: auto;
}

.social-container {
  float: left;
  margin: 5px;
  width:auto;
}

.social-content {
	float: right;
	margin-left: 5px;
	overflow: hidden;
	-moz-transition: max-width .3s ease-out;
	-webkit-transition: max-width .3s ease-out;
	-o-transition: max-width .3s ease-out;
	transition: max-width .3s ease-out;
	white-space: nowrap;
	max-width: 0;
}

.social-container:hover .social-content {
	-moz-transition: max-width .2s ease-in;
	-webkit-transition: max-width .2s ease-in;
	-o-transition: max-width .2s ease-in;
	transition: max-width .2s ease-in;
	max-width: 95px;
}

<div class="addthis_toolbox addthis_default_style ">
    <!-- FACEBOOK -->
    <div class="social-container">
      <img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="" />
      <div class="social-content">
          <a class="addthis_button_facebook_like at300b" fb:like:layout="button_count"></a>
      </div>
    </div>
    <!-- G+ -->
    <div class="social-container">
      <img src="<?php bloginfo('template_directory'); ?>/images/gplus.png" alt="" />
      <div class="social-content">
        <a class="addthis_button_google_plusone" g:plusone:size="large"></a> 
      </div>
    </div>
    <!-- TWITTER -->
    <div class="social-container">
      <img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="" />
      <div class="social-content">
        <a class="addthis_button_tweet at300b"></a>
      </div>
    </div>
 </div>