Здравейте приятели!
В поредната ни среща ще се научим как се прави динамичен бутон за уеб-сайт с помощта на CSS. В този урок се предполага, че вие имате базови понятия по програма Photoshop, а още по HTML и по CSS, за което поднасям изложеното по-сбито.

За целта са нужни графичен редактор (аз предпочитам Photoshop, а вие както ви е удобно). Нужен е още текстови редактор, в когото ще пишем изпълнимия код за сайта. Препроръчвам ви PSPad editor за целта и на края браузер - Firefox.

Стартираме графичния редактор и създаваме нов документ с размери равни на бъдещия бутон. Те трябва да са с определен запас спрямо размерите на текста върху бутона. По хода на изпълнието ще разберете защо.

Документът получава име "button" и размери 408px на 40px. В крак с заоблените форми ще ползваме инструмент Shape и зададем съответно радиус от 5px. За собствено удобство ползвам спомагателни линии по границите и включвам фунция прилепване от меню View. Превключвам на палитра Styles. Тази палитра върши черната работа и е достатъчно само да се посочи нужния стил, за да придаде завършен вид на бутона.

Стиловете по подразбиране в Photoshop са малко на брой и неподходящи. С ключова фраза "Web 2 styles for Photoshop" може да попаднете на изобилие от ресурси и да изтеглите за вас. Остава да ги заредите в вашия Photoshop - Edit >Preset Manager > Preset Type: Styles > Load...

Следва стандартна процедура по удвояване на слоя и леко видоизменение.

Дублираме слоя с гореща комбинация Ctrl+J. Копието пускаме под оригинала и подбираме стил различен от първия. За да станат нещата видими се налага да увеличим Canvas на нови 40px, а това на практика прави документа 408px на 80px. Сливаме двата слоя в един. Сега е момента да напишете текст върху бутона, за да съчетаете цветовете и се ориентирате какъв ще бъде номера му в HTML-измерение. Определили се с цвета на текста можете да премахнете слоя на същия.

Задайте размери на инструмент "Правоъгълна област" 23px на 80px и кропнете дясната част на бутона. Съхранете полученото под име button-r, например.

С гореща комбинация Ctrl+Z се върнете в първоначална позиция и отрежете по същия начин област в лявата част на бутона с размери 385px на 80px. Съхранете полученото под име button-l.

В краен резултат трябва да разполагате с две подобни изображения.

В тази част ще оживим нашия бутон или настъпи време за PSPad редактор.

Създаваме нов файл и в него копираме приложения HTML-код. На лице е таг a с адрес и приложен клас button, а вътре в линка добавяме таг span. Таг span заключва съдържанието на бутона, тоест, текста върху него.

Галерия

Описанието на бутона ще извършим чрез стилове в CSS. Воля ваша дали ще бъдат вътрешни или изнесени в външен файл.

.button {
 display:block;
 background:url(button-r.png);
 background-position:top right;
 background-repeat:no-repeat;
 padding-right:23px;
 float:left;
 outline:none;
 text-decoration:none;
}
 
.button span {
 display:block;
 line-height:10px;
 background:url(button-l.png);
 background-repeat:no-repeat;
 padding:15px 0 15px 23px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:16px;
 font-weight: bold;
 color:#e5e5e5;
}

.button:hover{
 background-position:100% -40px;
}

.button:hover span{
 background-position:0% -40px;
 color:#4c4b4b;
 font-weight: bold;
}

Нека погледнем CSS отблизо и видим, че няма нищо сложно.
В началото се описва стиловете на нашия линк в клас button. Първи пунк преобразува нашия линк в блоков елемент. Под него задаваме изображение в качество на фон. Това е дясната част на бутона (малката). Позиционираме го да застане горе в дясно и забраняваме повторението. Задаваме отстъп в дясно в пиксели равни на ширината на изображението. В случая 23px. Нагледно може да зададете по-голямо значение и да погледнете какво ще се случи в браузъра. За да не се разтяга бутона по цялата дължина на контейнера добавяме float:left.
outline:none премахва специфична рамка на точки, която добавя браузър firefox (предполагаме, че навигацията няма да се извършва от клавиатура).
От естетическа гледна точка декорация на текста е излишна, типичното подчертаване при посочване на линк, за това го премахваме с text-decoration:none.

Следват свойствата за таг span, които са заключени в него и естествено в началото преобразуваме в блоков елемент. Следва свойство line-height, за което задаваме височина на базовата линия на текста. В качество на фон дойде ред на лявата част на бутона. Забраняваме повторението. По повод отстъпите, задаваме по часовниковата стрелка съответните размери и тук следва чиста математика. line-height е 10рx, a нашия бутон е 40px. 40 - 10 = 30. 30/2 е по 15px отстъп отгоре и отдолу. По аналогия отсъпа от 23px в горната част на стиловете, пишем същата стойност за ляв отстъп. Следва избор на гарнитура, размер и цвят, като предпочетох удебелен текст за по-добра читаемост.

Поредните два пункта отговарят за поведението на бутона при посочване с курсора на мишката.
Позицията на button:hover по вертикала е с отрицателен знак и размер 40px. При посочване с курсора изображението ще се измести нагоре. А за по-голям ефект изменяме цвета на текста и това става, чрез hover span.

Защо постигнахме нещата по този начин, се питате вие?
Представете си, че след време решите да направите редизайн на сайта и съответно се наложи бутона, да има по-дълго име. Например, "Галерия" в "Моята Флаш Галерия". Всичко е ОК. Редактирате само в HTML-часта и пишете новия текст, без да се налага да прерисувате на ново бутона.