Создаем кнопку с помощью CSS: Часть первая

5 февраля 2010 года, Размещено в категории: HTML / CSS

Создаем кнопку при помощи CSS

Сегодня я покажу как можно сделает самую простую кнопку с помощу CSS.
Это будет мой первый урок из серии "Создаем кнопку при помощи CSS" во всех последующих уроков мы будем рассматривает новые методы создавания кнопки при помощи CSS.

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

css кнопка

Download

Объяснение кода:
В тег ссылки <a href="#"></a> ми вставили изображение кнопки, так как она в нас будет ссылкой.
src = "btn_red.gif" указываем путь к кнопке
width = "228" ширина кнопки
height = "49" высота кнопки

Как видим мы вставляли изображение кнопки при помощи тега <img/>.Теперь давайте подключим нашу кнопку через CSS, без применения тега img.

С начала создаем CSS файл:
1) Создаем новый .txt файл
2) Переименовуемо его в style.css (усе у нас есть наш CSS файл)
3) Прикрепляет CSS файл к HTML странице. Между тегом head пишем:


Теперь мы создаем блок (display: block;) высотой как наша кнопка (height: 49px;) и шириной (width: 228px;), смотрите CSS код.

a.btn1 {
display:block; /*Блок*/
width:228px; /*Высота*/
height:49px; /*Ширина*/
background:url(btn_red.gif) 0 0 no-repeat; /*подключаем изображения и no-repeat - не повторяться*/
text-indent:-999em; /*убираем текстовую ссылку*/
}
 
Download
 

Пока поисковые системы не умеют распознавать, что написано на кнопке и это плохо, но с помощю CSS мы можем им указать, что на кнопке написано.
Мы пишем в нашу ссылки, текст у меня например Download. И при помощи CSS скрывает его (text-indent:-999em;) но ПС видят его.

Для чего я его спрятал, потому что у нас ссылкой является кнопка, а текстовая ссылка нам не нужна.

Да она не реагируе на то что на нее навели курсор, или нажали, но это временно, у нас и было целью создать самую простую кнопку с помощью CSS.

Во всех последующих уроках мы будем делает ее более динамичной и привлекательной, если вам понравился урок и вы не хотите пропустить следующие уроки с серии "Создаем кнопку при помощи CSS", тогда подписаться на обновления блога.

Вот список  всех уроков:
Создаем кнопку при помощи CSS: Часть первая
Создаем кнопку при помощи CSS: Часть вторая
Делаем кнопки с помощью CSS, техника раздвижные двери
Бонус:
Красивые CSS кнопки с иконками

Мой блог находят по следующим фразам
скроллинг по якорям на сайте
красивый текст css
jquery пароль подтверждение
домен для дорвеев
дешевые домены для доров
сделал browsershots где скриншоты






15 комментариев

  • 8 лет назад Ответить

    А в чём преимущество создавания кнопки через CSS, кроме как что поисковики смогут «прочесть» её ? И, как создать кнопку для подписки на RSS какнал, чтобы ещё за одно и в браузере справо от адреса ссылки(в опере так) отображалось?

    • 8 лет назад Ответить

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

  • 8 лет назад Ответить

    Можно кнопку нарисовать без надписи, а текст использовать обычный. Гугл, вроде, CSS немного понимает и может что-нибудь сделать за скрытый текст, ИМХО.

  • 8 лет назад Ответить

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

  • 8 лет назад Ответить

    >>Меньший код, быстрее загружаеться страница
    безспорно!

  • 8 лет назад Ответить

    Честно говоря, вообще не понятно — к чему этот стук в бубен с выносом текста за границы. А не проще ли было удалить текст с изображения, сделать само изображение фоном и просто наложить поверх обычную надпись, которая прекрасно бы индексировалась?

  • 8 лет назад Ответить

    Конечно проще было удалить текст с изображения, но такой способ хорошо используется когда нужно логотипу ссылку прикрепить. Но для начинающих нужно и такой метод знать.

  • 8 лет назад Ответить

    Выносить текст нельзя, это плохо во всех отношениях. ИМХО лучше уж картинкой с альтом.

  • 8 лет назад Ответить

    киньте плиз ссылку на страницу с регистрацией, а то не заходит на feedburner.com гугл перекидывает на свою страницу,и там я не нашёл ссылку на сайт фида, вообще никак не могу туда попасть(

  • 8 лет назад Ответить

    feedburner там где регать свою RSS ленту, на http://www.feedburner.com не заходит из-за переадресация на гугл, и как мне тогда зарегать там свой RSS?

    • 8 лет назад Ответить

      Чтобы завести себе акаут на FeedBurner, нужно сначала зарегаты акаут на google, зайдешь в акаут и там будет ссылку на регистрацию FeedBurner.

  • 8 лет назад Ответить

    я как всегда в своём репертуаре) я думал акаунт гугл не причём к FeedBurner, спс что объяснил.

  • 6 лет назад Ответить

    Подскажите пожалуйста как сделать несколько кнопок на вашем примере… дублировать код в css… ничего не получается…

    • 6 лет назад Ответить

      Надо html код кнопки дублировать. Точнее саму ссылку:
      <a href="#" rel="nofollow">Download</a>
      К которой уже присваиваются стили css

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: