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

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

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

иконки google+

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

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

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

фреймворк кнопки 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>

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

кнопки google+

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

<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. Заказать книги в интернете теперь стало еще проще, специальный книжный интернет магазин имеет весьма широкий ассортимент и услугу доставки книг.
Для очищения организма от вредных элементов и шлаков помогают постные блюда рецепты которых в большом количестве вы сможете найти на нашем сайте.
Иногда для подъемов грузов заказывают специальную услугу наладка подъемников причем разных типов — от шахтных до кухонных и различных подъемных столов.

Понравился пост? Подпишись на обновления блога по Дизайн Мания RSSRSS, Дизайн Мания RSSEmail или твиттерtwitter!
А еще можно опубликовать ссылку на статью в своем блоге:
Опубликовать в twitter.com        

Комментариев - 5 для поста Кнопки в стиле Google+, скачать 200 иконок Google+
  1. ]]> Иван ]]> (Декабрь 21, 2011)

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

  2. ]]> funflow ]]> (Январь 19, 2012)

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

  3. ]]> Виктор Барчин ]]> (Сентябрь 6, 2012)

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

  4. ]]> Валентин ]]> (Май 12, 2013)

    Красиво

  5. ]]> Макс ]]> (Август 17, 2014)

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

Оставить комментарий
для статьи Кнопки в стиле Google+, скачать 200 иконок Google+