Делаем кнопки для сайта html

кнопки для сайта html

Как сделать красивые кнопки для сайта html, CSS или изображением. 

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

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

Сервисы по созданию кнопок англоязычные и онлайн без регистрации, но сложности не представляют, всё наглядно понятно и для русскоязычного населения.

Красивые кнопки для сайта онлайн картинкой

Первый сервис Da Button Factory.

Красивые кнопки для сайта онлайн

 

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

Настройки кнопки слева:

кнопки для сайта

  1. Текст, который будет отражаться на кнопке.
  2. Шрифт текста. Русский язык поддерживают только шрифты Sans Serif, Serif, Monospaced, Condensed и Calibri.
  3. Если поставить галочку то будет жирный текст.
  4. Курсив или нет.
  5. Размер текста.
  6. Цвет текста.
  7. Тень текста.
  8. Толщина тени.
  9. Цвет тени текста.
  10. Способ скачивания — картинка или CSS.
  11. Формат картинки — jpg, png или ico.

Настройки кнопки справа:

кнопки онлайн

  1. Углы — прямоугольные или закруглённые.
  2. или самостоятельная настройка скругления углов.
  3. Цвет кнопки и эффекты, градиент или нет, два цвета.
  4. Верхний цвет.
  5. Нижний цвет.
  6. Отблески.
  7. Обводка — размер и цвет.
  8. Тень кнопки — размер, цвет и с какой стороны.
  9. Размер кнопки — ширина и высота.

Вот после этих небольших манипуляций скачиваете на комп по кнопке «download».

Кнопки для сайта html, CSS

Второй сервис Button Generator предлагает сгенерировать кнопку в виде кода html и CSS.

сервис онлайн кнопок для сайта

 

В заготовках, в левой колонке, он уже имеет 39(тридцать девять) вариантов оформления кнопок, которые вы так же можете редактировать.

Что можно настроить у кнопки

Настройки в середине:

редактор кнопки

  1. Цвет фона.
  2. Цвет кнопки.
  3. Цвет градиента(если снята галочка с пункта 9).
  4. Цвет надписи.
  5. Цвет обводки.
  6. Цвет тени кнопки.
  7. Цвет тени текста.
  8. Если галочка стоит, то прозрачная кнопка, тоесть будет цвет фона.
  9. Градинет да или нет.

 Настройки справа:

настройка кнопок сайта

  1. Текст на кнопке.
  2. Размер кнопки.
  3. Название CSS класса, удобно чисто ля вас, чтоб в файле CSS знать, что это за настройки. По умолчанию называется «myButton», если хотите можете прописать своё название.
  4. Выбор шрифта, всего 7(семь), все поддерживают русский язык.
  5. Жирный шрифт.
  6. Курсив.
  7. Ширина.
  8. Высота.
  9. Радиус скругления углов.
  10. Ширина обводки.
  11. Фон тени кнопки имеет настройки — внутр или снаружи, расположение по вертикали и горизонтали, размытие и размер.
  12. Тень текста.
  13. Расположение по вертикали.
  14. Расположение по горизонтали.
  15. Размытие.

После всех этих несложных манипуляций нажимаете «Copy Code» и у вас в буфере сохраняется код, Который нужно сохранить(нажав Ctrl + V на клавиатуре) в текстовый файл или word, смотря чем вы пользуетесь.

Вот как он будет выглядеть:

html и CSS код для кнопки

где первое — это html, который вы будете вставлять в то место статьи, где будет располагаться кнопка. Вместо значка решётки (#) нужно поставить ссылку куда будет осуществляться переход, а вместо слова «green» текст, который будет на кнопке.

Вторую же часть нужно сохранить в файле style.css , который находится в корне вашего сайта. Если у вас WordPress или CMS с редактором, то можно открыть этот файл из админки, для всех остальных нужно будет зайти на хостинг и искать файл там.

Рекомендую:
EurobyteRegRuSmmBoxAdmitad

Добавь к себе на стену:

Похожие записи


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

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

  • Комментарии: 0