Давайте начнем с онлайн сервис http://dabuttonfactory.com/, предназначенного для создания и детальной настройки внешнего вида кнопок для своего сайта.


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

Так же вы сможете создать рамку для кнопочки, включить отбрасывание ею тени, задать точный размер и, наконец, выбрать формат, в котором она будет сохранена (png, gif, jpeg или ico).

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

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

Размер шрифта можете выбрать из выпадающего списка в поле «Size», а щелкнув по квадратику с текущим цветом рядом с надписью «Color», у вас появится возможность выбрать из открывшейся палитры нужный оттенок текста на создаваемой вами кнопке.
Палитра для выбора цвета текста имеет довольно широкие возможности.
Для того, чтобы выбрать оттенок в квадратной области палитры, нужно будет захватить мышью кружочек, расположенный в данной области. Другие оттенки для этой квадратной области можно выбрать ползунками на вертикальной полоске со всеми цветами радуги.
В общем, сами разберетесь — там все интуитивно понятно.
http://dabuttonfactory.com/

В области «Output type» можете выбрать, в каком именно виде будет сохраняться создаваемая вами кнопка. Можно выбрать из выпадающего списка либо вариант сохранения в виде графического файла, либо в виде CSS свойств.
В случае выбора сохранения в графический файл, у вас еще появится возможность выбрать формат (png, gif, jpeg или ico).

В области «Style» выбираете из выпадающего списка один из трех возможных вариантов стилевого оформления углов:

rectangular box — кнопка с прямыми углами (квадратными)
rounded box — со скругленными углами, причем радиус скругления можно задать в поле «Corners radius»

round box — с полукругами по бокам

В области «Background» задаете фоновую заливку создаваемой кнопки одним или несколькими цветами. Из выпадающего списка есть возможность выбрать варианты заливки:

unicolored — заливка одним цветом, который можно выбрать в области «Color»

two colors — заливка двумя оттенками, которые можно выбрать в области «Color».
Цвета будут заливать ровно по половине кнопки. Поменять их расположение можно при помощи «swap»

gradient — градиентная заливка двумя оттенками. В этом случае цвета будут плавно перетекать один в другой. Направление перетекания можно задать при помощи «swap»
pyramid — вариант градиентной заливки, но при этом один оттенок перетекает в другой, а затем опять осуществляется плавный переход к первому цвету. Ссылка «swap» позволяет менять их последовательность.

В области «Border» вы можете задать рамку для кнопки, указав ее толщину и цвет в соответствующих полях. В области «Size» можете задать ее размер по высоте и ширине. После окончания всех настроек загружаете итоговый файл к себе на компьютер, нажав на ссылку «download» в середине страницы. Он будет сохранен в том графическом формате, который вы выбрали в области «Output type».

Vives каталог керамической плитки

РР°РРµСС