Создание анимированной кнопки социальной сети с использованием CSS

28 июня 2015 | Опубликовано в css | 1 Комментарий »

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

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

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

Для начала мы создадим код HTML, который покажет текст, например, «Share This Page» (поделиться этой страницей). После этого сделаем так, чтобы при наведении указателя мыши на этот текст с помощью анимаций CSS появлялись кнопки социальных сетей:

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

Демонстрация работы

Код HTML

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

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

Кнопка будет открываться в средине, чтобы показать кнопки социальных сетей, так что добавим два раздела, которые будут использоваться для разделения текста:

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

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

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

Полный код HTML

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

<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);
}

При наведении указателя мыши должно отображаться следующее:

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

Демонстрация работы

Автор урока Paul Underwood

Перевод — Дежурка

Смотрите также:

Опубликовано в css, июня 28, 2015
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Создание анимированной кнопки социальной сети с использованием CSS

Код HTML

Полный код HTML

Код CSS

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые