Пользователь
0,0
рейтинг
10 апреля 2011 в 14:38

Разработка → Подборка 10 css3 кнопок

CSS*
С каждым днем новые стандарты css3 и html5 всё более глубоко входят в жизнь верстальщиков и web-разработчиков, а браузеры с каждым днем становятся все более совместимыми с этими стандартами.



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

1. Super Awesome Buttons.



Данный набор кнопок использует набор css3 а также раскраску RGBA.

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

Пример подключения:

<a class="large awesome">Super Awesome Button »</a> 
<a class="large blue awesome">Awesome Blue Button »</a> 
<a class="large magenta awesome">Awesome Magenta Button »</a> 
<a class="large red awesome">Awesome Red Button »</a> 
<a class="large orange awesome">Awesome Orange Button »</a> 
<a class="large yellow awesome">Awesome Yellow Button »</a>

Подробнее о Super Awesome Buttons »

2. Google Buttons.



За основу данных кнопок была взята главная страница Google.com. Они также просты и минималистичны.

Пример подключения:

<button type="submit" class="g-button">Search Google</button> 
<a class="g-button">I'm Feeling lucky</a>

Подробнее о Google Buttons »

3. CSS3 Gradient Buttons.



Кнопки очень похожи на Super Awesome Buttons о которых говорилось выше. Данный набор представлен несколькими цветами (9 цветов) и различными формами.

Пример подключения:


<a href="#" class="button black">Rectangle</a>  or
<a href="#" class="button black bigrounded">Rounded</a> Can be
<a href="#" class="button black medium">Medium</a> or 
<a href="#" class="button black small">Small</a> 
<input class="button black" type="button" value="Input Element" /> 
<button class="button black">Button Tag</button> 
<span class="button black">Span</span> 
<div class="button black">Div</div> 
<p class="button black">P Tag</p> 
<h3 class="button black">H3</h3> 

Подробнее о CSS3 Gradient Buttons »

4. Kick-Ass CSS3 Button.



Данная кнопка не является самой интересной с точки зрения дизайна, однако по ссылке ниже вы сможете ознакомиться с видеоуроком по созданию подобных кнопок, что будет полезно начинающим web-разработчикам.

Подробнее о Kick-Ass CSS3 Button »

5. Pure CSS social media icons.



Этот набор является набором иконок социальных сетей, нежели кнопок. Набор представлен десятью иконками социальных сетей среди которых Facebook, Twitter, Flickr и прочие.

Пример подключения:


<ul>
   <li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li>
   <li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li>
   <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li>
   <li class="flickr"><a href="#non" title="Share on Flickr">Flickr</a></li>
   <li class="delicious"><a href="#non" title="Bookmark on Delicious">Delicious</a></li>
   <li class="linkedin"><a href="#non" title="Share on LinkedIn">LinkedIn</a></li>
   <li class="google"><a href="#non" title="Bookmark with Google">Google</a></li>
   <li class="orkut"><a href="#non" title="Share on Orkut">Orkut</a></li>
   <li class="technorati"><a href="#non" title="Add to Technorati">Technorati</a></li>
   <li class="netvibes"><a href="#non" title="Add to NetVibes">NetVibes</a></li>
</ul>


Подробнее о Pure CSS social media icons »

6. Extremely fancy CSS3 buttons.




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

Пример подключения:


<a class="fancy_button" href="#">
<span style="background-color: #070;">Post</span>
</a>


Подробнее о Extremely fancy CSS3 buttons »

7. BonBon: Sweet CSS3 buttons.



Вы прирожденный сладкоежка? Тогда эти кнопки придуманы для вас. Сделаны они так, что их так и хочется съесть, или в конце концов применить в своем проекте. Различные цвета, формы, состояния вам несоменно понравятся.

Пример подключения:


<a href="" class="button orange glossy">Label</a>


Подробнее о BonBon: Sweet CSS3 buttons »

8. Realistic Looking CSS3 Buttons.



Интересный набор кнопок, строгие цвета, закругления, несомненно заслуживает внимания.

Пример подключения:


<a href="#" class="button">Pushit</a>


Подробнее о Realistic Looking CSS3 Buttons »

9. Simple CSS3 Github buttons.



Реализацию подобных кнопок вы уже видели ранее на github.com, очень просты в установке, удобны и минималистичны. Также возможно добавление к кнопкам иконок.

Пример подключения:


<a href="#" class="button">This is a Button</a>
<a href="#" class="pill button">This is a Pill Button</a>
<a href="#" class="negative button">Divide by Zero</a>


Подробнее о Simple CSS3 Github buttons »

10. Flexible CSS3 toggle buttons.



Эти Css3 кнопки сделаны очень симпатично, но не практичны, тк реализованы только с поддержкой Firefox, остальные браузеры увы не поддерживаются.

Пример подключения:


<div class="toggleOnleft">on</div><div class="toggleOFFright">off</div> 
<div class="toggleOFFleft">on</div><div class="toggleONright">off</div> 
<div class="toggleDisabledleft">on</div><div class="toggleDisabledright">off</div> 	


Подробнее о Flexible CSS3 toggle buttons »
Поляков Андрей @witka
карма
74,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (79)

  • –2
    Отличная подборка, спасибо!
  • +15
    когда же сдохнет IE6, что бы можно было это использовать нормально ;(
    • +15
      Может уже пора забыть о нем?
      • 0
        Если у вас коммерческий сайт для широкой аудитории, то про IE6 вы не скоро забудете
        • +3
          «Коммерческий сайт» в вопросе поддержки IE6 понятие не верное, нужно оперировать статистическими данными для конкретного проекта.

          К примеру: Сайт в среднем 100 заказов в день, 5 клиентов используют IE6.

          Далее мы разрабатываем новый дизайн без поддержки (или с частичной поддержкой) IE6 и запускаем его в сплит-тесте.

          Дальше все просто:

          if ((количество заказов с нового дизайна) — (5 заказов) > (количество заказов со старого дизайна)) Оставляем новый дизайн;

          Это очень упрощенный расчет так как в реальности может быть разная схема монетизации, разная сумма заказов и т.д. В данном приме я хотел подчеркнуть что решение поддерживать или нет IE6 должно опираться на статистические данные.
          • 0
            У вас неверная методика. Посмотрите видео — там 40 минут, но будет полезно. Позволит посмотреть на ситуацию с т. з. бизнеса.
            • +3
              Вы можете увидеть на видео (11:05) фразу «Отказаться от браузеров нужно только после тщательного анализа трафика сайта».

              А теперь то что я писал в 1 строке «Нужно оперировать статистическими данными для конкретного проекта».
              • 0
                Собсно про методику я отметил, потому как вы указали кол-во заказов как меру определения, а это не правильно: вдруг эти 5% заказов приносят 15% прибыли и т.п.?

                В остальном, я тоже отписал (не вам) про необходимость всё анализировать.
                • +5
                  В данном случае вы абсолютно правы, правильное учитывать именно прибыль. Я же использовал заказ как единицу меры для упрощения понимания идеи.

                  Был не прав. Молодой, горячий.
          • 0
            Да ладно, из за 5ти заказов на IE6-7 не менять дизайн, который может способствовать улучшению продаж в целом?

            Используем Progressive Enhancement, в IE6 будет упрощенный дизайн и layout, без всех красивостей (плюс, выводим табличку с предложением обновить браузер). Для IE7 и IE8 используем уже более-менее нормальные layout'ы, но также оставляем кнопочки без теней, градиентов и закруглений. Для всех нормальных браузеров используем CSS3.
            • +1
              5 заказов цифра условная. Взята для наглядности. Можно взять к примеру 5%.

              К тому же вы не учитываете такой параметр как цена верстки сайта который работает в IE6.

              Кроме того я написал «новый дизайн без поддержки (или с частичной поддержкой) IE6» — частичная поддержка и есть то что вы описали.

              Кстати в компании, где я сейчас работаю, я активно продвигаю идею выводить предложение обновить браузер. Но как было сказано в вышеприведенном видео, не все пользователи могу это сделать даже если захотят.
              • 0
                Ну, я согласен, пожалуй. У каждого проекта есть свой контекст, и надо все рассматривать индивидуально (используя в том числе статистику, о чем вы и пишете выше). Основная мысль в том, что не нужно пытаться делать дополнительные красивости для старых браузеров — овчинка выделки не стоит.
                • +1
                  Верно, в большинстве случаев не стоит.
        • +4
          У меня не коммерческий сайт, тем не менее могу поделиться динамикой аудитории. Полтора года назад доля пользователей ie6 у меня на сайте была около 45%, и не менялась. Поскольку основная аудитория сайта — очень далекие от IT женщины, понятно, что всё это были обладатели WinXP, пользующиеся тем, что встроено в ОС. Поэтому «ждать у моря погоды» было абсолютно бесполезно. Год назад на главной странице был установлен неотключаемый оверлей с предложением сменить браузер. За год общая аудитория немножко подросла — с 500-600 до 800-1000 уников в день, доля пользователей ie6 снизилась с 55 до 4-5%, но что самое радостное — общая доля пользователей ie снизилась с 85% до 29%! То есть большинство сменивших браузер сменили его НЕ на новую версию IE, а на нормальный, современный браузер. Учитывая, что головную боль причиняет не только шестой, это очень радостные результаты. Но повторюсь — сайт не коммерческий и в рунете уникальный, аудитория очень устойчивая, поэтому вполне можно было рассуждать в духе «никуда они не денутся».
          • 0
            Посмотрите видео Сергей Чикуёонка, ссылку на который я дал комментарием выше.

            Суть:
            1. Развлекательный сайт != коммерческий.
            2. Далеко не все могут сменить ие6 на новый или другой браузер по объективным причинам (допустим, политика компании).
            3. Денгьи пользователей ие6 ничем не отличаются от денег пользователей других браузеров.
            4. Вопрос поддержки ие6 решается не только статистикой посещаемости и мнением верстальщиков (ессесно отрицательным), а вкупе с анализом фин. показателей.
            • +1
              Ну я вам по секрету скажу — сайты бывают и не развлекательными, и не коммерческими. Фин. показатели таких сайтов зависят от продаж рекламы, а они зависят не от денег посетителей, а от денег рекламодателей. Которым важна целевая аудитория и ее прирост, а не браузеры, опять же. Поэтому если отказ от поддержки ie6 не мешает приросту аудитории — на финансовых показателях он не сказывается вообще никак.
              • 0
                Спасибо, что рассказали про существование других типов сайтов — век не забуду! :-)

                Всё, что далее — подходит под п. 4 моего коммента выше. Суть: каждый случай нужно тщательно анализировать.
                • +1
                  Именно об этом я и говорю. Огульное утверждение «заставляя пользователя сменить браузер, вы теряете деньги» — раздражает уже, все носятся с ним, как с иконой.
              • 0
                Для рекламодателей пользователи с ie6 как раз таки более «вкусные», так как они не могут блокировать рекламу фичами типа «AdBlock» которые доступны только нормальным браузерам. :)
            • +4
              Деньги пользователей IE6 обходятся заказчику сайта дороже, чем деньги остальных пользователей, разве нет?:)
          • 0
            Боюсь только причиной тому стал не ваш оверлей с предложением сменить браузер.
            Сайт с 500 униками вряд ли заставит «далекую от IT женщину» на подобный подвиг.
            Мне видится все проще — за последний год доля пользователей ИЕ снизилась в целом по рунету, так что не устанавливая оверлей, вы, скорее всего, смогли бы сейчас наблюдать похожий результат.

            P.S. я устанавливаю его только в качестве «объяснения» почему все так криво, чтобы не оставлять пользователя в неведении, однако нисколько не надеясь, что он тутже сменит браузер. Так что скорее всего оверлей не спасет от потери ie6-клиента.
            • 0
              Я не буду спорить с вами, однако останусь при своем мнении. У меня аудитория постоянная, и она вся на месте — никто не потерялся. Уникальность контента имеет значение.
              • 0
                Так я и не оспариваю, то что вы сохранили аудиторию и при этом большая часть пользователей отказалась от ИЕ.
                Я всего лишь хотел подчеркнуть, что это, скорее всего, не в результате баннера, а просто «ход истории».
          • +5
            Мне все же кажется, что ИЕ6 в массе своей убивает ютуб, который просто не работает в этом браузере.


            Небольшие (по посещаемости) информационные сайты, пропагандирующие нормальные браузеры, конечно вносят свою лепту, но на основную массу действует все-таки ютуб и другие тяжеловесы.
            • 0
              Щито? Ютуб не работает в ИЕ6? Еще как работает(
              Такая же бессмыслеца имхо, как и плашка (но полная работоспособность) навконтакте. Люди, использующие ИЕ6 не понимают, что такое браузер и суть надписей на всех этих плашках. Надо чтоб не работало совсем, чтоб они обратились к какому-нибудь осведомленному знакомому, и он уже установил им что-нибудь современное.
            • 0
              Подход Ютуба к ИЕ6 самый нормальный — объяснить пользователю, что «дорогой, сходи скачай другой браузер»
        • +2
          В разрезе визуальных фич рулит graceful degradation.
          И все покупатели все равно будут ваши ;)
      • 0
        гг, а туда кто-то на огнелисе 7 заходит
    • +1
      Уже можно и даже нужно, совместимости это не ломает, зато пользователи будут видеть что в их браузере сайты выглядят хуже.
      • –1
        А мне кажется пользователи будут винить во всем верстальщиков, ведь они не будут знать, что в каком-то браузере эти кнопки выглядят лучше.
    • +20
      хах, будто ИЕ7 и ИЕ8 чем то лучше, в плане поддержки ксс3
      • +6
        Напоминаю: использование CSS3 PIE позволяет добавить к своему сайту поддержку целого ряда свойств CSS3 в браузерах IE6, IE7, IE8 и IE9.
      • +3
        ну хотя бы маржин с паддингом считают правильно, это уже огромнейший плюс.
        • 0
          + поддержка png очень облегчает верстку
    • +2
      Пока разработчики будут поддерживать, до тех пор и будет жить.
    • +2
      Что вы понимаете под сдохнет? Уже сдох, фактически. А в плане пользования, так извините, я иногда в логах своих сайтов вижу людей с IE5 на Win98
    • 0
      IE6 до сих пор является корпоративным стандартом во многих очень крупных компаниях :(
    • 0
      когда вообще ie сдохнет, чтоб можно было пользоваться.
  • 0
    Ценно, спасибо большое.
  • +16
    стопятидесятитысячная подборка одних и тех же кнопок
  • +7
    Лично я исключил бы из подборки кнопок этот экземпляр. Считаю, что одинаковые кнопки должны иметь одинаковую высоту.
    image
    • +4
      Да они вообще только на картинках хорошо выглядят. Мало того, так они еще и в Opera не работают. Мусор.
      • +1
        они еще и в Opera не работают.

        — и в чей огород этот камень, как вы думаете?
        • +10
          Всё, что пишется и публикуется, должно работать на тех брузерах, которые проходят всякого рода ACYD тесты. Особенно, если предлагается использовать на собственных проектах, а не просто похвастаться.
          Если разработчик следует стандартам — будет работать везде, а если использует -moz-property или тестовые возможности, которые объявлены только в Webkit (например, WebGL), то будет работать только в нескольких браузерах.
          Соотвественно, камень в огород разработчикам кнопок.
          Если кто-то считает, что Opera слишком кривой браузер, что показывать Google-like кнопки, пусть откроет в Опере, ммм… Google?
          • 0
            *acid
      • +4
        Они вообще нормально выглядят только под WebKit'ом.
        В Firefox кстати, наоборот, левая кнопка больше правой =) Офигенно чувак поработал, ничего не скажешь…
  • +21
    Хабр катится в сраное говно еще быстрее, чем кажется. Сначала уроки для фотошопа, теперь эта херня. И такое каждый день. Люди, одумайтесь, хватит это плюсовать, иначе через год-другой вы будете читать не хабр, а филиал оллдея или чего-то подобного, а альтернативы не будет.
    • 0
      Что плохого в том, что люди выкладывают подборки интересных вещей?
      Вы смотрите что делают другие и потом используете это у себя или придумываете что-то своё, это нормально и быстрее чем самому ходить по гуглу.
      Поправьте меня если это не так.
      • +10
        Во-первых, мне лично насрать на иконки — я не дизайнер. Если и верстаю, то по готовым шаблонам. А хабр, как вы помните, это не совсем дизайнерский ресурс, для них есть девиантарты, дриблы и еще куча такого.
        А, во-вторых, тоннами таких псевдоинтересных вещей (которые на проверку говном оказываются, как тут уже замечали) и так завален весь рунет, найти что-то подобное совсем не проблема. А с другой стороны — много где вы еще найдете посты на хорошем русском языке с хорошей дискуссией внизу, например, про генетические алгоритмы? Если вам это не интересно — и для вас бОльшую ценность представляют посты с набором идиотских кнопочек, которые верстаются за минуту — действительно ли вы по адресу на хабр пришли?
        Поймите же, наконец, что серьезные авторы с серьезными вещами в голове теряют мотивацию, когда посты про текстуру получают +300 (или сколько там?), а, практически, научная работа, на которую положено немало времени, сил и которые требуют серьезного багажа знаний — +50.
        • 0
          Ну так зачем вы читаете если вам всё равно? Вы не можете изменить людей если им это нравится, хотите наставить их на путь истинный?
          Для научных публикаций есть свои журналы и если публикация стоящая учёные её оценят. Разве дело должны быть в карме? Очевидно что публикации понятные и интересные большему числу людей получат больше плюсов чем узкоспециализированные.
          • +6
            Коли мы находимся на ресурсе, где есть карма-рейтинг, как система регуляции — то нужно с ней считаться, других критериев для оценки популярности и важности статьи тут нет.
            Вот вы лично, написали топик про прогресс-бар, программировали там, вспоминали геометрию, рисовали понятные иллюстрации. А пост вот-вот будет менее популярен (читай — хуже), чем вот это, написанный с помощью трех кнопок — ctrl, C, V. Вам лично не обидно? Вы считаете достойной ту аудиторию, которая хавает копипасту для домохозяек и пропускает более сложные вещи? Если тут большинство «неайтишников, которым неинтересны узконаправленные посты» — то, может, им место на фишках — там куда доступнее для понимания контент, чем здесь?
            • 0
              Может быть и так, но я всё к тому что вы же не можете заставить кого-то бы то ни было перекочевать на фишки.
              Такие посты, как этот, тоже невозможно каждый день делать, очень быстро присытится и надоест, но пока, как видите, этого не произошло.
        • +3
          А в третьих, кнопки с использованием CSS3 написать самостоятельно — дело трех минут. Я все время смотрю на эти готовые подборки и думаю — неужели кто-то использует готовые кнопки? Что, свой дизайн под них подгоняют? Кнопки все-таки должны быть частью дизайна сайта.
          • +1
            Вы большой молодец, но спешу сообщить что далеко не все могут сделать такие кнопки за три минуты. Для этого они учатся на таких примерах, либо просто сохраняют в избранное, чтобы при случае, не тратить на это время.
    • –6
      да ты ебанись!
      Мне кажется что наоборот сейчас стало гораздо больше узкотематических топиков, многие из которых весьма интересны. С ППА есть шанс получить еще больше статей от специалистов в своих областях.
      Но ваша же чудесная память запомнила только тот пост полугодовой давности. Увы
      • +2
        вот этот блог участвует в ППА — данный пост действительно заслуживает поощрения, по-вашему? А он, если я вник в программу, вполне себе уже что-то заработал
        • 0
          Тут дело как раз в том, что это решают не я, и не мнения отдельных людей. Если он набрал свои 77, значит это было кому-то полезно. Можно также обратить внимание на количество людей добавивших пост в закладки. Или вы тут хотите им всем доказать, что зря они это сделали? Или в чем проблема-то?
          Пост подобного содержания, как и пост про планы боинга про перевозку космических туристов, никак не сказывается на количестве узкотематических и серьезных статей.
          • 0
            так я и печалюсь, что даже на хабре большинство — глупое быдло, хавающее приколюшечки и прочий низкосортный контент. А мой посто про боинги попросил написать мой товарищ, которому, зачем-то, позарез нужна была ссылка на сайт с хабра.
            • 0
              Build your own Habr, with blackjack and hookers.
              • +2
                По весьма объективным причинам мы с вами не можем построить свой хабр, поэтому остается влиять на текущий таким вот нытьем в комментариях, что незамедлительно отражается на карме, что только доказывает несостоятельность аудитории, которая зачастую даже в дискуссию не может вступить.
                • –2
                  чувак, это не я =D
            • –1
              Такое количество версий, зачем же одному вашему товарищу понадобилась ссылка на хабре, зато как вы его ловко уже спрятали-то =)
              Пока не вижу доказательств что вы не один из названного вами большинства.
              • +1
                Ну, если говорить на чистоту — то тот пост и собрал справедливые +5 от моих друзей и благополучно канул в лету. Спрятал я его именно потому, что он нафиг тут никому не нужен был, кроме того самого товарища.
                Доказывать что-то я не собираюсь, не думаю, что проблема сильного падения качества статей на хабре как-то заметно коррелирует с маленьким топиком-ссылкой, который почти никто и не увидел даже.
  • +3
    Добавлю от себя ещё вот этот набор:
    http://ubuwaits.github.com/css3-buttons/
  • 0
    Realistic Looking CSS3 Buttons очень интересно в опере выглядит.
    • 0
    • 0
      <sarcasm> Очень реалистично, я бы так сказал. </sarcasm>
  • +1
    Подробнее о CSS3 Gradient Buttons »

    ссылка битая
    • +1
      fixed
  • 0
    Ничего выдающегося, если честно.
  • +1
    Пользуюсь этими socialistpear.com/journal/aristo-buttons-in-css3/ если не использую jQuery-UI, в противном случае вместе с темой для jQuery-UI — «Aristo» github.com/taitems/Aristo-jQuery-UI-Theme или еще альтернатива github.com/hellotoby/Jquery-UI-Aristo-Theme
    а насчет поддержки IE(любого) не беспокоюсь.Пользуются старыми браузерами — пусть мучаются\пользуются дальше. Их дело. Как эти любители IE видят мои сайты меня совершенно не волнует. Гоняться за такими посетителями я не собираюсь. Хотя, подумываю сделать чтобы nginx редиректил старые браузеры на страничку информации о поддерживаемых браузерах и ссылок на страницы для обновления. Сайт один а посетителей много — пусть сами подстраиваются под него если нужно. Всем не угодишь. Но себя мучить написанием «костылей» для IE не стану.
    И да, минусуйте дальше — чтоб ваще комментить не мог=)
    • 0
      Странно что по первой ссылке забыли про IE, который тоже градиент умеет.
  • 0
    Может быть, хватит в каждом топике блога писать первые 20 комментов про IE6, обсуждать степень его распространения?
  • –1
    Половина работает только в вебките, вторая не работает в опере и почти ничего из перечисленного не работает в IE. А «Goog-looking buttons for your homepage» — это для smashing magazine, здесь такое видеть по меньшей мере странно.
  • 0
    Как то давненько делал кнопки на css3 для темных фонов.
    sofcase.net/post/buttons-on-css3-for-dark-backgrounds/
  • –1
    Автор — это «Хабр»! Зачем такое здесь постить???
    • –1
      Может и не Хабр: рейтинг +188, 795 раз в избранном.
      • 0
        Не знаю. Может и нет. Просто я лично, воспринимаю этот ресурс исключительно как авторитетный, передовой источник современной информации в IT. Поэтому и не пишу здесь постов такого типа. Отсюда и созрел мой предыдущий вопрос.

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

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.