Раскрывающаяся при наведении курсора кнопка с иконками соц.сетей

Автор:
Nurlan Kemelbekov

Каждый веб-сайт в настоящее время имеет кнопки социальных сетей. Это отличный способ дать посетителям возможность поделиться ссылкой со своими друзьями.

Но дело в том, что все они выглядят одинаково и с одной стороны  это хорошо, потому что люди узнают их и знают, как их использовать, а с другой стороны плохо, так как ваш сайт выглядит так же, как и любой другой веб-сайт в Интернете.

Раскрывающаяся при наведении курсора кнопка «отправить другу» с иконками соц.сетей — своеобразное решение, которое поможет немного разнообразить показ иконок на страницах блога WordPress. В этой статье я хочу показать, как создать раскрывающуюся кнопку «отправить другу», используя CSS анимацию  для отображения, чтобы можно было отправить ссылку на текущую страницу в Facebook, Twitter, Google Plus и ВКонтакте.

Сначала нам нужно создать HTML, который будет показывать текст, например, Отправить эту страницу другу. Потом, мы хотим использовать CSS анимацию для отображения кнопок социальных сетей, когда мы наведем курсор на этот текст.

Вот так будет выглядеть раскрывающаяся кнопка в обычном состоянии.Кнопка отправить другуА это вид после наведения курсора на  раскрывающуюся кнопку с иконками соц. сетей.Иконки соц.сетей

Посмотрите демо в конце статьи, чтобы увидеть, что мы собираемся создать.

<div class="share_button">
<ul>
<li>
<h1>Отправить эту</h1>
</li>
<li>
<h2><a title="Поделиться на Facebook" href="http://www.facebook.com/sharer.php?u=&lt;?php the_permalink(); ?&gt;"><img src="путь к изображению" /></a></h2>
<h2><a title="Поделиться на Twitter" href="http://twitter.com/home?status=Share On Twitter &lt;?php the_permalink(); ?&gt;">
<img src="путь к изображению" />
</a></h2> </li> </ul> <ul> <li> <h1> страницу другу</h1> </li> <li> <h2><a title="Переслать Google Plus" href="https://plus.google.com/share?url=&lt;?php the_permalink(); ?&gt;"><img src="URL изображения" /></a></h2> <h2><script charset="windows-1251" type="text/javascript" src="http://vk.com/js/api/share.js?90"></script><script type="text/javascript">// <![CDATA[ document.write(VK.Share.button(false,{type: "custom", text: "<img src=\"/images/VK.png\" />"})); // ]]></script></h2> </li> </ul> </div>

Код выше будет использован на странице WordPress single.php и использует WordPress функцию the_permalink (). Если вы не используете это на WordPress, удалите эту функцию и замените его на URL, которым вы хотите поделиться.

Используйте следующую CSS для создания внешнего вида кнопки.

.share_button {
width: 300px;
height: 50px;
margin: 10px auto;
}
.share_button ul {
width: 50%;
height: inherit;
float: left;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
.share_button ul h1 {
margin-top: 9%;
overflow: hidden;
width: 100%;
color: #4889F0;
font-size: 18px;
text-shadow:2px 2px 2px #fff;
}
.share_button ul li {
position: absolute;
height: inherit;
width: 150px;
margin: 0 !important;
padding: 0 !important;
background: #EEEEEE;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
}
.share_button ul li h2 {
display: inline-block;
width: 32%;
height: 40px;
overflow: hidden;
margin-top: 5%;
cursor: pointer;
border: 0 !important;
}
.share_button ul:first-child li:first-child{
text-align: right;
}
.share_button ul:last-child li:first-child{
text-align: left;
}
.share_button ul:first-child li:last-child,
.share_button:hover ul:first-child li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.share_button ul:last-child li:last-child,
.share_button:hover ul:last-child li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.share_button:hover ul:first-child li:last-child,
.share_button:hover ul:last-child li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}

Посмотрите демо ниже, чтобы увидеть, что мы создали и было бы хорошо сразу же попробовать, кликнув на одну из кнопок соцю сетей.

Этот css код я увидел на одном из забугорных блогов . Правда код html ссылок на соц.сети пришлось немного изменить. Если Вы захотите использовать это, то Вам нужно подобрать иконки соц. сетей, загрузить в директорию темы сайта (скорее всего это будет папка images) и вставить адреса этих иконок в html код <img src=» «/>

Рекомендую также прочитать статью о том, как добавить иконки социальных сетей в меню навигации WordPress.



Вам также может понравиться:


2 комментарий на “Раскрывающаяся при наведении курсора кнопка с иконками соц.сетей

  1. А как написать свой текст в окно поделиться facabook и вставить изображение?

    • Измените текст так, как Вы желаете. Чтобы вставить свое изображение укажите путь к картинке так: <img src=»http://ваш сайт.com/img/facebook.pngf» alt=»альтернативный текст»>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

* Copy This Password *

* Type Or Paste Password Here *

три × 2 =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!