Кнопки в стиле Google+, скачать 200 иконок Google+

Социальная сеть Google+, даже находясь в стадии бета-тестирования, ураганом ворвалась в жизнь продвинутых пользователей, поэтому не стоит удивляться тому интересу который данная социальная сеть вызывает, в том числе и у веб-дизайнеров, разработчиков и seo оптимизаторов. Этот интерес достаточно велик и постоянно «подогревается» разработчиками Google, которые постоянно усовершенствуют проект и добавляют интеграцию с другим своими сервисами. Так, например, среди сеошников популярностью пользуются кнопки и иконки Google+ которые позволяют добавлять «+1» для вашего сайта или страницы.

Но не «+1» единым, в последний год внешний вид Google+ диктовал моду и другим сервисам компании Google, которые подверглись изменению дизайна и стиля оформления. Общим элементом для многих проектов можно выделить стильное меню вверху страницы, похожие иконки, кнопки управления да и вообще много разных элементов, что можно найти во всех проектах — от почты Gmail до Google Reader. Cегодня представляю вашему внимаю интересный набор кнопок в стиле Google+, найденные на сайте shrapp.nl. Набор этот является не просто иконками социальной сети Google+, а скорее целым фреймворком позволяющим добавить кнопки интерфейса из Google+ на свой сайт.

Посмотреть демо как работают кнопки Google+, скачать эти иконки и почитать документацию по их установке можете на этой странице. Во-первых, вы, конечно. можете просто сказать эти симпатичные минималистические иконки для разных действий, ситуаций и т.п. дабы использовать в своем дизайне или сайте. Более продвинутый вариант — это подключение фреймворка (скриптов) для применения иконок через css cтили легко и быстро.

Установка кнопок Google+

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

Итак, порядок установки:

1. Поместите файл css и изображения в корневую директорию сайта, ну или туда где у вас располагаются стили для шаблона.

2. «Подключите» таблицу стилей для этого добавьте в код ссылку вида (добавляется где угодно между <head> и </head>):

<link rel="stylesheet" href="css/css3-buttons.css" type="text/css" media="screen">

3. Далее подключим jQuery TipTip плагин и соответствующую таблицу стилей (добавляется где угодно между <head> и </head>):

<!-- Using TipTip jQuery plugin for the tooltips -->
<link rel="stylesheet" href="tiptip.css" type="text/css"  media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.tiptip.js"></script>
<script>
        $(document).ready(function() {
                // Launch TipTip tooltip
                $('.tiptip a.button, .tiptip button').tipTip();
        });
</script>

4. Если вам нужны dropdown (выпадающее) меню, добавляем также:

<script>
        $(document).ready(function() {
                // Toggle the dropdown menu's
                $(".dropdown .button, .dropdown button").click(function () {
                        $(this).parent().find('.dropdown-slider').slideToggle('fast');
                        $(this).find('span.toggle').toggleClass('active');
                        return false;
                });
        }); // END document.ready
 
        // Close open dropdown slider/s by clicking elsewhwere on page
        $(document).bind('click', function (e) {
                if (e.target.id != $('.dropdown').attr('class')) {
                        $('.dropdown-slider').slideUp();
                        $('span.toggle').removeClass('active');
                }
        }); // END document.bind
</script>

На этом установку можно считать законченной. Теперь чтобы, например, вывести вот такие кнопки:

… добавляете код:

<a href="#" class="button left"><span class="label">Left</span></a>
<a href="#" class="button middle"><span class="label">Middle</span></a>
<a href="#" class="button right"><span class="label">Right</span></a>
 
<a href="#" class="button left"><span class="icon icon63"></span></a>
<a href="#" class="button middle"><span class="icon icon58"></span></a>
<a href="#" class="button right"><span class="icon icon64"></span></a>

То есть за счет фреймворка все кнопки Google+ можно отображать через css и html путем несложных действий. Другие примеры использования кнопок в стиле Google+ можете найти в документации, на которую я ссылался ранее. В принципе нет ничего сложного, а получается весьма симпатично и стильно — особенно это, думаю, актуально будет для разработок каких-то внутрикопроративных сайтов, где кнопки будут использоваться для интерфейса системы.

P.S. Заказать книги в интернете теперь стало еще проще, специальный книжный интернет магазин имеет весьма широкий ассортимент и услугу доставки книг.
Для очищения организма от вредных элементов и шлаков помогают постные блюда рецепты которых в большом количестве вы сможете найти на нашем сайте.
Иногда для подъемов грузов заказывают специальную услугу наладка подъемников причем разных типов — от шахтных до кухонных и различных подъемных столов.

6 комментариев к статье “Кнопки в стиле Google+, скачать 200 иконок Google+”

Иван

21.12.2011

Спасибо за иконки, как раз их искал.
funflow

19.01.2012

о, вот это ништячок,пригодится! новый диз у гугла хороший
Виктор Барчин

06.09.2012

обожаю простоту и изысканность элементов интерфейсов Google! :)
Валентин

12.05.2013

Красиво
Макс

17.08.2014

Очень даже ок иконки, поставлю себе на сайт)
Frag

27.12.2016

Norm.

Оставить комментарий