Создание HTML и CSS кнопок
    
    
Цвет: #    Выбрать цвет Цвет при наведении: #    Выбрать цвет
Радиус углов: px Градиент:
Нижний цвет: #    Выбрать цвет
Стиль градиента:
Нижний цвет при наведении: #    Выбрать цвет
Размер шрифта: em Отступы от текста по вертикали:горизонтали: px : px





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

Цвет имеет значение

Если вы создаете не просто сайты-однодневки, а серьезные ресурсы, в которые вкладываете все свои знания и частичку души, то каждая мелочь имеет значение. А такой элемент страницы, как кнопка (button) и мелочью-то не назовешь. Кнопки – это ваши электронные продавцы-консультанты: они приглашают зайти, купить, написать отзыв и предложить дальнейшее сотрудничество. Поэтому ко внешнему виду кнопок веб-мастерам стоит отнестись очень внимательно и подойти к разработке этих важных элементов ресурса творчески.

Сервис cy-pr.com предлагает вам воспользоваться инструментом "Создание HTML и CSS кнопок", благодаря которому вы можете создать идеальную кнопку для вашего ресурса. Задав необходимые критерии в специальных полях, и нажав "Создать", вы получите готовые HTML и CSS коды кнопки, предназначенные для размещения на сайте.

Мы предлагаем вам цветовую палитру, состоящую из тысяч оттенков, поэтому подобрать необходимый цвет для будущей кнопки не составит труда. Если вы – не веб-дизайнер и плохо ориентируетесь в цветовых моделях, то воспользуйтесь нашим инструментом "Конвертер цветов", где размещена удобная таблица с кодами различных цветовых оттенков.

Старайтесь, чтобы кнопка гармонично вписывалась с дизайн и стиль вашего сайта. Она должна быть помощником посетителя, его путеводной звездой, а не огромным Всевидящим Оком, следящим за пользователем на всех страницах ресурса.

Функционал инструмента

Итак, с основным цветом будущей кнопки вы определились и ввели его цифровое значение в поле "Цвет". Например, вы выбрали оранжевый (#FF6600) цвет. Теперь нужно решить, будет ли кнопка однотонной или стоит дополнить ее другим цветом. Если останавливаемся на втором варианте, то необходимо заполнить поле "Нижний цвет" (например, возьмем лимонный оттенок - #FFFF00) и поставить "галочку" в поле "Градиент". Затем вы можете выбрать стиль градиента: вертикаль, горизонталь или линия по центру. "Закруглить" кнопку можно с помощью функции "Радиус углов".

Чтобы пользователь видел, что кнопка "реагирует" на клик, необходимо задать оттенок в поле "Цвет при наведении", отличный от основного цвета кнопки. Здесь также можно сделать градуированную двухцветную кнопку, но градиент будет аналогичным тому, который был задан для основной кнопки.

Далее необходимо задать размер шрифта внутри кнопки и отступы текста от ее краев.

Все, ваша кнопка готова. Теперь нажмите "Создать" и посмотрите результат. Ниже, в специальном поле, появятся HTML и CSS коды кнопки. Каким из них воспользоваться – решать вам.

Другие инструменты:
Оптимизатор css кода
Оптимизирует код страниц, что экономит время загрузки.
Favicon генератор
Создание фавиконки онлайн
Проверка заголовков сервера
Проверка ответа сервера, HTTP статусов.
Подсчёт длины текста
Подсчёт длины текста с пробелами и без, количества слов.
Генератор мета тегов
Генератор META - тегов по заданным параметрам.
Карта сайта
Создание онлайн карты сайта. Генератор xml карты сайта (sitemap.xml)
Подсчёт длины текста
Подсчёт длины текста с пробелами и без, количества слов.
Транслит переводчик
Быстрый и простой в использовании ONLINE-переводчик транслита.
Новые темыОбъявленияСвободное общение
19:57 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 
17:19 AviTool - мощный инструмент для автоматизации работы с Avito 
23:26 соцсеть Norm для нормальных людей 
19:22 Ошибка стоимостью в $100 млрд. Как чат-бот привел к падению стоимости Google 
13:10 Попытка взлома 
11:21 LGaming - экосистема и партнерская программа в gambling и betting вертикалях 
11:07 AntiBot Cloud - бесплатный скрипт и сервис защиты сайтов 
16:18 Metrochange – безопасный обменник ваших криптовалют по выгодным курсам 
16:00 Продвижение сайтов в поисковых системах, анализ вашего сайта абсолютно бесплатно (первым 3-м обратившимся) 
01:24 Cosmochanger.cc - Самый реактивный обменник. Быстрый и безопасный способ обменять более 20 популярных криптовалют 
23:46 Undetectable - антидетект браузер для быстрой и безопасной работы в сети. 
23:44 Мытнинский - безопасный обмен криптовалют с 2018 года 
23:36 Зарабатывайте на P2P-обмене Bitbanker без курсовых рисков 
13:44 Ручное размещение вечных статей и ссылок на хороших площадках. Опыт 15 лет! 
20:19 Стряхнуть обыденность - об Агасфере 
19:00 Российский «китайский файрвол», который сделает бессмысленными VPN-сервисы 
13:42 CPA.HOUSE - Топовая CPA сеть 
09:40 В России начали блокировать VPN-подключения 
08:49 Уволили за 47 опозданий - отсудила "за расизм" $11 млн у работодателя 
23:15 С юмором по жизни! 
23:12 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди