Создаем кнопку с помощью CSS: Часть первая
5 февраля 2010 года, Размещено в категории: HTML / CSS
Сегодня я покажу как можно сделает самую простую кнопку с помощу CSS.
Это будет мой первый урок из серии "Создаем кнопку при помощи CSS" во всех последующих уроков мы будем рассматривает новые методы создавания кнопки при помощи CSS.
Для того чтобы создать простую кнопку, нам нужно для начала ее нарисовать. Если нет такой возможности, тогда скачайте уже готовую, но лучше учитесь сами рисовать при помощи фотошопа. Вот моя кнопка:
Объяснение кода:
В тег ссылки <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 где скриншоты
Артём
9 лет назад
А в чём преимущество создавания кнопки через CSS, кроме как что поисковики смогут «прочесть» её ? И, как создать кнопку для подписки на RSS какнал, чтобы ещё за одно и в браузере справо от адреса ссылки(в опере так) отображалось?
9 лет назад
Меньший код, быстрее загружаеться страница. В последующих уроках вы поймете, что без CSS крутые кнопки не реально сделать 🙂
9 лет назад
Можно кнопку нарисовать без надписи, а текст использовать обычный. Гугл, вроде, CSS немного понимает и может что-нибудь сделать за скрытый текст, ИМХО.
9 лет назад
Я немножко не правильно сказал, что скрываем текст, мы просто тест выносим за пределы окна браузера (ПС видит их). Например такой метод используют и при вставке логотипа на сайт.
9 лет назад
>>Меньший код, быстрее загружаеться страница
безспорно!
9 лет назад
Честно говоря, вообще не понятно — к чему этот стук в бубен с выносом текста за границы. А не проще ли было удалить текст с изображения, сделать само изображение фоном и просто наложить поверх обычную надпись, которая прекрасно бы индексировалась?
9 лет назад
Конечно проще было удалить текст с изображения, но такой способ хорошо используется когда нужно логотипу ссылку прикрепить. Но для начинающих нужно и такой метод знать.
9 лет назад
Выносить текст нельзя, это плохо во всех отношениях. ИМХО лучше уж картинкой с альтом.
Артём
9 лет назад
киньте плиз ссылку на страницу с регистрацией, а то не заходит на feedburner.com гугл перекидывает на свою страницу,и там я не нашёл ссылку на сайт фида, вообще никак не могу туда попасть(
9 лет назад
На какую страницу регистраци ???
Артём
9 лет назад
feedburner там где регать свою RSS ленту, на не заходит из-за переадресация на гугл, и как мне тогда зарегать там свой RSS?
9 лет назад
Чтобы завести себе акаут на FeedBurner, нужно сначала зарегаты акаут на google, зайдешь в акаут и там будет ссылку на регистрацию FeedBurner.
Артём
9 лет назад
я как всегда в своём репертуаре) я думал акаунт гугл не причём к FeedBurner, спс что объяснил.
Андрей
7 лет назад
Подскажите пожалуйста как сделать несколько кнопок на вашем примере… дублировать код в css… ничего не получается…
7 лет назад
Надо html код кнопки дублировать. Точнее саму ссылку:
<a href="#" rel="nofollow">Download</a>К которой уже присваиваются стили css