Как сделать красивые кнопки для сайта html, CSS или изображением.
Сегодня хочу рассказать вам про два очень удобных сервиса с помощью которых вы за пару минут сможете сделать себе кнопку на сайт даже если вы не знаете html и CSS.
Конечно можно установить плагин шорткодов или наделать скриншотов кнопок из поиска гугл, да или просто скачать, но если вы очень редко используете кнопки у себя на сайте, то лучше воспользоваться описанными ниже сервисами.
Сервисы по созданию кнопок англоязычные и онлайн без регистрации, но сложности не представляют, всё наглядно понятно и для русскоязычного населения.
Красивые кнопки для сайта онлайн картинкой
Первый сервис Da Button Factory.
Давайте пройдёмся по настройкам, которые расположены слева и справа от визуального отображения вашей будущей кнопки.
Настройки кнопки слева:
- Текст, который будет отражаться на кнопке.
- Шрифт текста. Русский язык поддерживают только шрифты Sans Serif, Serif, Monospaced, Condensed и Calibri.
- Если поставить галочку то будет жирный текст.
- Курсив или нет.
- Размер текста.
- Цвет текста.
- Тень текста.
- Толщина тени.
- Цвет тени текста.
- Способ скачивания — картинка или CSS.
- Формат картинки — jpg, png или ico.
Настройки кнопки справа:
- Углы — прямоугольные или закруглённые.
- или самостоятельная настройка скругления углов.
- Цвет кнопки и эффекты, градиент или нет, два цвета.
- Верхний цвет.
- Нижний цвет.
- Отблески.
- Обводка — размер и цвет.
- Тень кнопки — размер, цвет и с какой стороны.
- Размер кнопки — ширина и высота.
Вот после этих небольших манипуляций скачиваете на комп по кнопке «download».
Кнопки для сайта html, CSS
Второй сервис Button Generator предлагает сгенерировать кнопку в виде кода html и CSS.
В заготовках, в левой колонке, он уже имеет 39(тридцать девять) вариантов оформления кнопок, которые вы так же можете редактировать.
Что можно настроить у кнопки
Настройки в середине:
- Цвет фона.
- Цвет кнопки.
- Цвет градиента(если снята галочка с пункта 9).
- Цвет надписи.
- Цвет обводки.
- Цвет тени кнопки.
- Цвет тени текста.
- Если галочка стоит, то прозрачная кнопка, тоесть будет цвет фона.
- Градинет да или нет.
Настройки справа:
- Текст на кнопке.
- Размер кнопки.
- Название CSS класса, удобно чисто ля вас, чтоб в файле CSS знать, что это за настройки. По умолчанию называется «myButton», если хотите можете прописать своё название.
- Выбор шрифта, всего 7(семь), все поддерживают русский язык.
- Жирный шрифт.
- Курсив.
- Ширина.
- Высота.
- Радиус скругления углов.
- Ширина обводки.
- Фон тени кнопки имеет настройки — внутр или снаружи, расположение по вертикали и горизонтали, размытие и размер.
- Тень текста.
- Расположение по вертикали.
- Расположение по горизонтали.
- Размытие.
После всех этих несложных манипуляций нажимаете «Copy Code» и у вас в буфере сохраняется код, Который нужно сохранить(нажав Ctrl + V на клавиатуре) в текстовый файл или word, смотря чем вы пользуетесь.
Вот как он будет выглядеть:
где первое — это html, который вы будете вставлять в то место статьи, где будет располагаться кнопка. Вместо значка решётки (#) нужно поставить ссылку куда будет осуществляться переход, а вместо слова «green» текст, который будет на кнопке.
Вторую же часть нужно сохранить в файле style.css , который находится в корне вашего сайта. Если у вас WordPress или CMS с редактором, то можно открыть этот файл из админки, для всех остальных нужно будет зайти на хостинг и искать файл там.
