addThis Sharing Buttons для Wordpress, как оживить?

Question

Я ищу плагин/код, который может дать некоторую приятную анимацию наведения мыши над addThis общими кнопками, но все же вам понравится твиттер с одним щелчком, например, и т. Д. функция addThis кнопки по умолчанию.

Одно я теперь по умолчанию, выглядит,

Что я хочу что-то подобное тому, что используется в arduino.cc блоге, кнопки 1 щелкните по умолчанию скрыты по умолчанию и получить видимый только при наведении мыши. например: -

Как я могу добиться этого?

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>

Edit: Final AddThis код & CSS

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

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

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

 
.social-container:hover .social-content { 
 
\t -moz-transition: max-width .2s ease-in; 
 
\t -webkit-transition: max-width .2s ease-in; 
 
\t -o-transition: max-width .2s ease-in; 
 
\t transition: max-width .2s ease-in; 
 
\t 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>