Создание закругленных кнопок для сайтов

Создание закругленных кнопок для сайтов

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

Здесь представлены 9 отличных статей на тему создания кнопок с изменяемой шириной.

Создание круглых ссылок-кнопок с помощью CSS

Минус этого метода в наличии большого количества span-ов и наличие двух графических файлов для создания фона. К плюсам можно отнести появляющуюся рамочку вокруг кнопки при наведении мышкой и возможность изменения высоты кнопки.

Creating bulletproof graphic link buttons with CSS

Владимир Токмаков: Рамки, тени, кнопки, плашки

К минусам пожалуй относится достаточно сложная релизация данного способа. К плюсам конечно то, что здесь используется PNG с уже исправленым багом в IE. Статья на русском.

Владимир Токмаков: Рамки, тени, кнопки, плашки

Создание и оформление кнопок с изменяемыми размерами

Минус: тег button не всегда удобен для использования. Плюс: эффект нажатия.

Создание и оформление кнопок с изменяемыми размерами

Круглые уголки, интересные варианты

Минус: слишком большое количество тегов i при реализации. Плюс: Плюс: всего один файл для создания оформления, не зависит от размерашрифта, быстрое создание нового скина, не зависит от фона на которомлежит, при отключенных картинках белая ссылка будет на нужном фоне (вданном случае оранжевом). Статья на русском.

Круглые уголки, интересные варианты

Создание кнопок сайта с простым CSS и HTML

Минус: простота оформления. Плюсы: не зависит от размера шрифта, всего один файл для создания кнопок и ее оформления и очень простая реализация.

Создание кнопок с простым CSS и HTML

CSS овальные кнопки сайта

Минус: наличие div`а при реализации, два файла картинок.

CSS овальные кнопки

Простые круглые кнопки сайта с помощью CSS (Wii Buttons)

Плюсs: всего один файл для создания кнопки и ее оформления, очень простая реализация, достаточно красивое оформление.

Простае круглые кнопки с помощью CSS (Wii Buttons)

Оформление кнопки сайта с помощью «раздвижных дверей»

Минусы: два файла картинок, проблемы с эффектом нажатия кнопки. Плюсы: красивое оформление.

Оформление кнопки с помощью «раздвежных дверей»

Создание красивых кнопок сайта с помощью CSS

В минусах этого метода так же наличие двух картинок для фонов. Плюс: очень простая реализация.

Создание сексуальных кнопок с помощью CSS

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 15

Synopt1ck
спасибо! как раз сейчас парился над такими кнопками
#
Synopt1ck
Артём Курапов
По теме http://kurapov.name/technology/ui/css/css_web2_buttons
#
Артём Курапов
Grin
Спасибо, Артем! хорошее дополнение
#
Grin
jeenart
Здорово, отличная статья.
макси
отличная статя можно побольше таких статей
#
макси
дима
круто
#
дима
http://trader.uz
Полезная статья
#
http://trader.uz
ni_x
Очень интересно. хотя с многим не согласен.
Vanekru
Спасибо, есть на что обратить внимание.
gps
Очень интересно. Спасибо )))
#
gps  
Илья
Ссылка на "9 отличных статей на тему создания кнопок с изменяемой шириной" на 404 ведет...
Иван
Просмотрел практически все приведенные у вас ссылки. Отличная статья, люблю обзоры. Пробовал скомбинировать разные методы, тут описание: http://deadhorse.spb.ru/buttons-rounded-corners-javascript/
Alex
Cпасибо за уроки... :)
#
Alex

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler