为Wordpress添加这个共享按钮，如何动画？

Question

我正在寻找一个插件/代码，可以通过addThis分享按钮提供一些漂亮的鼠标悬停动画，但仍然希望享受一键式推文，如等。 addThis默认按钮的功能。

我现在拥有的是默认，看起来像，

我想要的是类似于arduino.cc博客中使用的内容，默认的单击按钮默认隐藏，只在鼠标悬停时可见。 例如： -

我怎样才能实现这个目标？

Answer 1

您可以将自定义图像与实际共享按钮放在一起。 默认情况下保持所有共享按钮的宽度为0，并通过增加宽度使其在悬停时可见。 还可以添加CSS过渡以平滑地扩展按钮。

考虑这个例子。

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

编辑：最终添加此代码＆amp; 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>