Мар
11

Html кнопка для вашего сайта

Author admin    Category Настройка Wordpress     Tags

Кнопка на сайтНедавно я решил сделать кнопку для сайта и мне пришлось немного помучиться. Что бы в не повторяли мои ошибки и сэкономили время, я покажу как сделать кнопку для сайта при помощи html и css.

Главная проблема с которой я столкнулся — обилие непонятных онлайн ресурсов по созданию кнопок, а так же сайты которые всё это распедаливают на техническом языке, понятному не каждому. Цель этой статьи — упростить жизнь новичкам.

Кнопки для сайта с помощью html и css

Вообще кнопка создаётся двумя этапами:

  1. Задаются стили в css.
  2. Размещение на сайте с помощью html.

В CSS прописывается вид нашей кнопки: цвет, отступы, размеры, градиенты и т.д. Ну а с помощью html мы выводим эту кнопку на сайте.

Я как и многие мои читатели вообще не представляю как сделать кнопку для сайта. И поэтому я для этого использую один замечательный ресурс: maxzon.ru. Данный генератор позволяет нам создать собственную кнопку, затем получить её в виде CSS и Html кода. Вам останется добавить эти 2 кода в соответствующие места. Html код нам позволит сделать не просто кнопку, а кнопу-ссылку.

CSS кнопки для сайта с помощью maxzon.ru

Преступим к созданию кнопки, переходим по ссылке: http://maxzon.ru/button_gen/index.html

И сразу попадаем в панель создания кнопки. С лева вы можете настроить свою кнопку, а с права вы можете видеть результат работы. Рассказывать о каждой настройке не буду, вы сами всё поймёте, там очень просто. Отмечу главные моменты. Вы настраиваете 3 состояния кнопки:

  • нормальный;
  • при наведении;
  • нажатая.

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

html кнопка

Под своей кнопкой вы сразу же получаете 2 кода:

CSS код кнопки сайта

Что делать с css кодом кнопки надеюсь знаете. Открываете файл  — style.css, и вставляете в самый низ. Отмечу сразу, button, это название вашего стиля кнопки. Его можно изменить, если вы планируете вставлять несколько кнопок с разными стилями.

button

Теперь открываете свою статью или виджет (смотря куда вы кнопку ставите) в режиме html и вставляете в нужное место следующий код:

Код для кнопки

В место #, вставьте url куда должна перебросить кнопка. В место preview у вас будет надпись кнопки. Собственно вот и всё.

Я так же столкнулся с интересным моментом. У меня почему то html код который даёт генератор, не хочет становится в статью. После сохранения статьи, надпись кнопки выпадает из кнопки и меняется код:

Кривая кнопка

Я просто немного изменил код, и сделал его таким:

<a class=»button» href=»http://ваш сайт/»>название кнопки</a>

Вот и всё. кнопка готова.

Кнопка готова

 



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

Новые шаблоны и статьи

Рубрики

Популярные шаблоны

Мы помогаем детям


KosynokBannerNetwork