Кнопка на сайтУрок №66

Недавно я решил сделать кнопку скачать для сайта, и мне пришлось немного помучиться. Что бы вы не повторяли мои ошибки и сэкономили время, я покажу как сделать кнопку для сайта при помощи 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>

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

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

Комментариев: 5

  1. Александр

    здравствуйте ! хорошая статья , все удобно , и создание кнопки вообще прелесть ! Но у меня проблема , кнопку сделал скопировал код html  но когда вставил на сайт там просто буквы без синей рамки ! так вот как мне эту рамку вклеять не пойму !

    1. Павел

      Вы проверьте код после того , как его вставили, wp мог его автоматически изменить и поэтому кнопка отображается неверно.

  2. Александр

    У меня такая же проблема. WP меняет код с Preview на Preview  И отображается только надпись, без рамки...что можно сделать в этом случае? Код ставлю в описание в описание рубрики.

    Спасибо!

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

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