Статьи

Как создать анимированную кнопку «Поделиться» в CSS

Август 7, 2018

У каждого веб-сайта теперь есть кнопки «Поделиться» в социальных сетях , и если у вас их нет, то вы действительно должны их получить. Это отличный способ дать вашим посетителям легкий доступ, чтобы поделиться вашим контентом со своими друзьями и подписчиками.

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

В этом уроке мы собираемся создать кнопку «Поделиться», которая использует CSS-анимацию для отображения ссылок, чтобы поделиться текущей страницей в Facebook, Twitter, Google Plus и Pinterest.

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

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

демонстрация

HTML

HTML, который мы собираемся использовать, имеет много различных разделов, которые мы разделяем, используя различные элементы HTML, и все это будет заключено в div с классом share_button.

<div class="share_button">
</div>

Кнопка будет открываться в середине, чтобы отобразить кнопки общего доступа, поэтому мы собираемся добавить 2 раздела, которые мы будем использовать для разделения текста.

<div class="share_button">
<section>
<article>
<h1>Share th</h1>
</article>
</section>
<section>
<article>
<h1>is Page</h1>
</article>
</section></div>

 

В этих двух разделах мы собираемся показать или скрыть теги статьи для отображения кнопок обмена. В этом примере на каждом теге статьи будет 2 кнопки общего доступа, всего 4 кнопки общего доступа, которые будут отображаться.

Ниже приведен полный HTML-код со всеми социальными кнопками в разных разделах.

Полный HTML-код

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

<div class="share_button">
<section>
<article>
<h1>Share th</h1>
</article>
<article>
<h2><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" title="Share On Facebook">F</a></h2>
<h2><a href="http://twitter.com/home?status=Share On Twitter <?php the_permalink(); ?>" title="Share On Twitter">T</a></h2>
</article>
</section>
<section>
<article>
<h1>is Page</h1>
</article>
<article>
<h2><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" title="Share On Google Plus">G</a></h2>
<h2><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>" title="Share On Pinterest">P</a></h2>
</article>
</section></div>

CSS

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

Используйте приведенный ниже CSS, чтобы создать вид кнопки.

.share_button { width: 300px;height: 70px; margin:0 auto; }
.share_button section { width: 50%; height: inherit; float: left; }
.share_button section h1 { margin-top: 13%; overflow: hidden; width: 100%;color: #fff;}
.share_button section article { position: absolute; height: inherit; width: 150px; background: #d4d5d9;
	-webkit-transition: all 600ms;
	-moz-transition: all 600ms;
	-o-transition: all 600ms;
	-ms-transition: all 600ms;
	transition: all 600ms;
	text-align: center;
}
.share_button section article h2 { display: inline-block; width: 40%;	height: 40px; overflow: hidden;	margin-top: 10%; cursor: pointer; }
.share_button section article h2:hover { text-shadow:2px 2px 2px #555; }
.share_button section article h2 a { color:#FFF; text-decoration: none; }
.share_button section:first-child article:first-child{ text-align: right; }
.share_button section:last-child article:first-child{ text-align: left; }

С созданной кнопкой вы можете добавить эффект наведения, чтобы отображать социальные кнопки на заднем плане.

.share_button section:first-child article:last-child,
.share_button:hover section:first-child article:first-child {
	-webkit-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
	-o-transform: rotateY(90deg);
	-ms-transform: rotateY(90deg);
	transform: rotateY(90deg);
}
.share_button section:last-child article:last-child,
.share_button:hover section:last-child article:first-child {
	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	-o-transform: rotateY(-90deg);
	-ms-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
}
.share_button:hover section:first-child article:last-child,
.share_button:hover section:last-child article:last-child {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

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

демонстрация

 

 

 

38
Share: