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

05.02.2010   |  

HTML / CSS   |  

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

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

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

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

css кнопка

1

<a href="#"><img src="btn_red.gif" alt="Download" width="228" height="49" /></a>

Объяснение кода:
В тег ссылки <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 пишем:

1

<link href="style.css" media="all" rel="stylesheet"type="text/css" />

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

1
2
3
4
5
6
7

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

<a class="btn1" href="#">Download</a>

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

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

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

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

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

Если вам нужно заказать изготовление сайта за короткое время, плюс качественный и недорогой, тогда  Вам нужно обратиться в Ardas Group. Эти ребята Вам точно помогут.

Интересные статьи:

  1. Артём 05.02.2010 18:38

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

  2. Webchester 05.02.2010 23:01

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

  3. [m.k] 05.02.2010 23:09

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

  4. Webchester 06.02.2010 14:47

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

  5. wlad2 06.02.2010 16:59

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

  6. Yaroslav.CH 07.02.2010 20:37

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

  7. Webchester 07.02.2010 22:31

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

  8. Lucky Dude 07.02.2010 22:32

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

  9. Артём 09.02.2010 19:53

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

  10. Webchester 10.02.2010 01:48

    На какую страницу регистраци ???

  11. Артём 10.02.2010 15:31

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

  12. Webchester 10.02.2010 16:26

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

  13. Артём 10.02.2010 17:48

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

Оставь свое мнение:




Подпишись на обновление блога