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

Где сделать кнопку для сайта онлайн?

Реферальные банеры

Доброго времени суток уважаемые посетители ИнетСоветы.ру!

В этом посте я хочу показать как легко сделать кнопку для сайта без знаний css. Пример такой кнопки Вы можете видеть у меня под формой комментариев. Создана она с помощью онлайн сервиса cssbuttongenerator.com С помощью данного сервиса без знаний css сделать кнопку сможет каждый.

Как создать кнопку с помощью css генератора

На первой картинке Вы видите уже готовую кнопку. Давайте рассмотрим как же она получилась. Как Вы видите цвет кнопки не однородный, а состоит из 2-х цветов: красного и розового. На картинке числами отмечены маркеры для подбора цвета. Как Вы видите 1 и 2 отвечают за градиент цвета кнопки, 3 - цвет шрифта, 4- цвет рамки для кнопки, 5- цвет тени для рамки, 6 - цвет тени для текста, 7 - сделать кнопку одного цвета. Из цветами Вы можете поэкспериментировать сами и создать кнопку на свой вкус.

Как сделать кнопку для сайта без знаний css?

На следующем скрине Вы видите дополнительные настройки. Здесь можно указать название кнопки, указать класс стилей, выбрать тип шрифта, его размер. Также изменить радиус и ширину границы, размеры кнопки по вертикали и горизонтали. Можно убрать тень от рамки и текста.

Как сделать кнопку для сайта без знаний css?

Как добавить код сгенерированных стилей кнопки на сайт

После того как Вы сделали кнопку для сайта, кликните по ней и в соответствующем поле появится код этой кнопки:

Как сделать кнопку для сайта без знаний css?Первая часть <a href="#" class="button">Добавить</a> - это конструктор ссылки для вставки кнопки в любое место. Например, захотелось Вам создать кнопку Читать далее и Вы хотите вставить ее вывод после анонса статьи. В себя в шаблоне Вы можете найти ссылку вида <a href="<?php the_permalink() ?>">Читать далее</a>, которая выводится после анонса поста, немного модифицируем ее, присвоив ей класс стилей <a href="<?php the_permalink() ?>" class="button">Читать далее</a>. И не забудьте скопировать с другого поля код стиля кнопки и вставить в файл style.css, а то ничего не поменяется.

Как сделать кнопку для формы комментариев?

Процесс создания кнопки остается прежним, только нужно открыть файл comments.php и посмотреть какой класс стилей у Вашей кнопки:

Как сделать кнопку для сайта без знаний css?

В моем случае это id="submit", т.е. теперь нужно класс submit указать в поле CSS Class Name, где в данном примере прописано button. Нажмите еще раз на созданную в редакторе кнопку, чтобы изменения вступили в силу.  Если в файле style.css есть уже стили для кнопки с классом submit, то заменяем их на новые. В зависимости от шаблона класс стилей для кнопки может отличаться.

Надеюсь Вы разобрались как сделать кнопку для сайта и сможете сделать это самостоятельно без знаний css. До скорой встречи!

Понравилась статья? Поделиться с друзьями:
Как заработать деньги в интернете
Комментарии: 5
  1. Игорь

    Сервисом этим пару раз пользовался, не удобно что на английском. Правда все и так понятно

  2. Игорь

    Любую кнопку сделать не сложно, благо сервисы на это есть нам в помощь, да и установить не проблема на блог

  3. Рашида

    Я тоже пользуюсь этим сервисом когда нужно быстренько создать симпатичную кнопку — Подписаться на статьи, или Скачать, Получить и так далее

  4. Мозгунова Ирина

    Спасибо за подробные разъяснения. Умение делать красивые кнопки очень пригодится — ведь они, думаю, смогут украсить и страницы сайта и подписные страницы.

  5. alf2012

    Даже если есть базовые знания css с этим сервисом кнопку сделать гораздо проще — сразу видишь ее внешний вид и можно даже оценить как она смотрится на фоне определенного цвета.

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности. Комментарий появится после проверки. Комментарии, содержащие спам и ненормативную лексику будут удалены!

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.