как создавать очень красивые и удобные текстовые кнопки


Эта инструкция научит Вас, как создавать очень красивые и удобные текстовые кнопки (с эффектом нажатия), используя CSS.

как создавать очень красивые и удобные текстовые кнопки


Техника раздвижных дверей

Что бы сделать наши кнопки практичными, мы должны учесть возможность растяжки кнопок. Для этого мы воспользуемся техникой «раздвижных дверей»(slidingdoors).
Наша кнопка будет состоять из основного тега a с вложенным в него тегом span, каждый из которых содержит одну из частей фонового рисунка.
Вот то, что HTML выглядит следующим образом:
<a class="button" href="#"><span>Bring world peace</span></a>


Очень просто, не так ли?
Теперь, нам надо разобраться с оформлением нашей кнопки в нормальном состоянии и в состоянии нажатия.

Вот что я думаю:

как создавать очень красивые и удобные текстовые кнопки


Мы будем использовать для обоих состояний одно изображение, просто изменяя его background-position.

Вот так выглядит наша заготовка с учетом всех факторов:
как создавать очень красивые и удобные текстовые кнопки


Оформляем кнопку

Оформляем с помощью следующего css кода:
.clear { /* generic container (i.e. div) for floating buttons */    overflow: hidden;    width: 100%;}a.button {    background: transparent url('bg_button_a.gif') no-repeat scroll top right;    color: #444;    display: block;    float: left;    font: normal 12px arial, sans-serif;    height: 24px;    margin-right: 6px;    padding-right: 18px; /* sliding doors padding */    text-decoration: none;}a.button span {    background: transparent url('bg_button_span.gif') no-repeat;    display: block;    line-height: 14px;    padding: 5px 0 5px 18px;}a.button:active {    background-position: bottom right;    color: #000;    outline: none; /* hide dotted outline in Firefox */}a.button:active span {    background-position: bottom left;    padding: 6px 0 4px 18px; /* push text down 1px */}



Специально для IE

В Internet Explorer нажатие кнопки не будет работать, так что сделаем маленькую хитрость на javascript:
<a class="button" href="#" onclick="this.blur();"><span> … </span></a>



Готово ^_^

Посмотреть пример
Скачать пример

источник


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.


30 марта 2008  1 6 629   HTML CSS скрипты Версия для печати


Похожие публикации

Подборка инструментов для эффективной frontend разработки

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

Веб-дизайн / CSS для начинающих. CSS кнопки это просто

Решил я начать новую серию статей — «CSS для начинающих», надеюсь, будет полезно многим. Первый урок будет посвящен кнопкам… Источник: Уроки CSS на Хабрахабре... читать далее

Блог им. RayZ / Задача: Кнопки в Internet Explorer и волшебные пространства

Столкнулся с проблемой укрощения кнопок под Internet Explorer. Для наглядности имеем следующий код: <html>   <style type="text/css">     .hacked {       width:auto;... читать далее

Немного о CSS свойством «background-image»

CSS свойство « background-image » служит для заливки чего-либо (блока, ячейки таблицы, страницы целиком) фоновым рисунком. Что можно сделать, используя это свойство?... читать далее

Блог им. ekwo / Привязываем иконку к каждому типу файлов на CSS

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

Google / В индекс Google по кнопке

Google запустил новый сервис «On-Demand Indexing» для вебмастеров, которые установили поиск от Google у себя на сайте. Сервис позволяет вебмастеру самостоятельно «сказать» когда нужно... читать далее

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

  1. #1 написал: Ant0ha1
    Группа: Гости
    17 августа 2008 13:42

    Спасибо очень полезная инфа для меня
    • 0

       

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте