Несколько способов как создать кнопки для сайта — использование сервисов, разметка HTML и Css

Здравствуйте, уважаемые читатели wmbn.ru! Сегодня еще раз хотелось бы затронуть один из компонентов форм для сайта — кнопки. В статье HTML формы я уже писал как добавить кнопку на сайт и указать для нее тип, а так же упомянул как присвоить для нее фон, но описал более подробно данный процесс. Естественно в данном посте рассмотрим несколько способов как создать кнопку для сайта, включая сервис для создания кнопки в онлайн.

Ну и следовательно пополнятся рубрики Уроки HTML, CSS и Div, а так же дополнится категория Сервисы интернета. А если подумать, зачем вообще нужны будут кнопки для сайта. Ну во-первых, чтобы выделить ссылку — к примеру вы хотите, чтобы ваш файл кто-либо скачал (по партнерской программе или еще какая-нибудь причина). Простой ссылкой тут вряд ли обойдешься, вот чтобы по ней кликнули, нужно обрамить ее в качестве кнопки. В интернет-магазинах тоже кнопку Купить не делают ссылкой, т.к. им нужно продать товар, указывая способ посетителю для его покупки.

Создание кнопки для сайта с помощью HTML и CSS

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

Начнем с самого простого варианта создания кнопки — это использование простого изображения. Т.е. средствами HTML тегов загружаем изображение на сайт, задав для него определенную длину и ширину, а затем прописываем для него ссылку. Для примера приведу код:

<a href="http://ссылка на источник" target="blank"><img src = "1.png" title="HTML кнопка для сайта" alt="HTML кнопка для сайта" /></a>

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

Хочу заметить, что картинки следует загружать в формате *.png, т.к. он поддерживает прозрачный фон и является более распространенным. Изображение же можно подобрать с помощью сервисов для поиска иконок, или бесплатных онлайн хранилищ картинок или создать свою в GIMP или Photoshop. Можно создать для данной кнопки псевдокласс, но его целесообразно создавать в том случае, если данная HTML кнопка будет использоваться очень часто и на каждой странице. Тогда создание отдельного стиля для блока с кнопкой будет уместно.

Кроме использования изображения, можно создать блок, который тоже сможет играть роль кнопки. Суть использования в том, что ссылка помещается в отдельный оформленный Css блок, который максимально приближен к виду простой кнопки. Для начада потребуется создать стиль для блока:

<div style="border: 1px solid #ffcc00; background: #fff1ba; padding: 2px; border-radius: 5px;
 font-size: 16px; font-family: Arial;"></div>

Получилась этакая псевдо-кнопка — ссылка, которая максимально приближена к кнопке. Однако что интересно — если использовать данный вариант, то можно увеличить количество кликов на ссылку, обратив на нее внимание таким способом. Но тут стоит заметить, что одно оформление не спасет — правильно подобранный текст ссылки тоже играет немаловажную роль. Можно использовать другой фон для Css кнопки, изменив background , вставив в него путь до изображения. Использование псевдокласса тут точно такое же, что и с использованием HTML кнопки с изображением.

Можно использовать элемент HTML формы — кнопка с фоном. Для этого тоже потребуется создать заранее готовую кнопку и загрузить ее на сервер (в WordPress). Далее с помощью тегов создаем HTML кнопку с фоновым изображением:

<a href="ссылка"><input alt="Всё в wmbn.ru" src="/wp-content/uploads/2012/04/odnomru.png" type="image" /></a>

Данный способ, как мне кажется, создает HTML кнопку более естественно — если в первом случае кнопка с использованием изображения выделялась рамкой, то в последнем она уже определяется браузером и движком как HTML кнопка — отдельный элемент формы.

Теперь о том как создать изображение для кнопки. Можно использовать Photoshop, а можно и Gimp — разница в создании изображения для кнопки несущественны, а в Gimp даже есть готовые варианты. Небольшой совет — при создании любого изображения, будь то Photoshop, Gimp или Paint.NET, всегда используйте слои. Причина в том, что можно изменить абсолютно любую часть изображения, естественно если данный фрагмент расположен на новом слое.

Для примера разберу вариант создания кнопки в графическом редакторе Gimp (аналог Photoshop). Создадим изображение с разрешением 400 на 200 точек — это будет являться готовой платформой для фона кнопки. Ее можно залить либо градиентным фоном, либо сплошным, а так же подобрать для него изображение из фото хранилища.

Залив фон, создадим для него новый слой, в который будет помещен текст кнопки — выбираем для него подходящий шрифт и цвет. Если к тексту необходимо привязать эффект, то лучше всего создать копию слоя с текстом, если при задании эффекта требуется растрировать слой (привести к виду рисунка, после которого текст не будет иметь возможности изменяться). Если же нет, то создавать новый слой для кнопки не имеет смысла.

Выбрав эффекты, фон и текст для кнопки, сохраняем ее на ПК в формате *.png, чтобы изображение имело поддержку прозрачности. Остальные действия выполняются как написано выше. Если нет времени готовить свою кнопку, то ее можно выбрать из редактора Gimp — Файл — Создать — Кнопки или Логотипы. В случае с логотипами можно прямо в генераторе выбрать все текстуры для будущей кнопки. Останется лишь обрезать изображение до вида кнопки (можно использовать округленные края), предварительно объединив все слои.

Создание кнопки для сайта с помощью сервиса

Рассмотрим способ создания кнопки с помощью стороннего сервиса — Da Button Factory. С помощью данного сервиса можно создавать довольно красивые кнопки без правки ее кода — за вас все сделает автоматизация. Кнопки, созданные с помощью сервиса Da Button Factory получаются довольно красивые и оригинальные. И это все без единой правки HTML кода кнопки — еще раз упомяну, за вас все сделает сервис.

Рабочий интерфейс можно разделить на три части — настройка текста, предварительный просмотр кнопки, настройка вида кнопки. Сверху расположено меню, где на странице Examples можно посмотреть пример созданной кнопки и отредактировать ее по своему вкусу.

Приступим к созданию своей HTML кнопки с помощью сервиса Da Button Factory. Начнем с текстовой части кнпоки — в поле Text вводим название будущей кнопки. Далее указываем гарнитуру шрифта (Font), стиль (Bold и Italic), а так же размер (Size) и шрифт (Font). Далее можно придать для текста тень (Text Shadow), задав для него размер и цвет.

С текстом кнопки разобрались, приступим к настройки внешнего вида. В поле Style можно выбрать стиль кнопки — круглые края,округлые или прямые. В Background указываем тип фона кнопки — простая, двухцветная, градиент. В зависимости от того, какой тип выбран, меняется настройка цвета. Можно задать глянцевый эффект, выбрав Bubble Effect. Выбрав пункт Border, можно задать для кнопки границу, выбрав для нее цвет и размер.

Кроме того, для кнопки можно создать тень (Shadow). Для тени настраиваются такие параметры, как размер, цвет и ориентация. Ниже настраивается размер кнопки — динамический (подстраивающийся) и статический. Выбрав динамической размер, настраиваются отступы от краев кнопки, если статический — размер по длине и ширине.

Определившись с внешним видом кнопки, нужно теперь ее установить на сайт. В поле Output Type из выпадающего списка выбираем способ установки — загрузка изображения или использование кода. Если загрузить изображение, то можно использовать способы создания кнопки описанные выше. Если использовать код, то придется использовать Css. Но в случае со вторым вариантом, кнопка, а точнее ее картинка, загружается с сервера Da Button Factory.

Исходный код Css кнопки загружаем в файл style.css. Можно оставить код как есть, или же изменить его первую часть:

a.button

На:

#button

После этого будет удобно вставлять блок с кнопкой на сайт, просто задав в тексте блок div, с помощью которого загрузится изображение копки с сайта. Способ довольно трудоемкий и требует от сервера Da Button Factory постоянной работы.
На этом запись о создании кнопок с помощью HTML и Css кода можно закончить. Использовать можно как стандартные изображения, так и манипулировать блоками.