Једноставно дугме Цалл то Ацтион са ЦСС и јКуери

Позив на акцију у веб дизајну је термин који се користи за елементе на веб страници који траже акцију од корисника (клик, лебдење, итд.). Данас ћемо креирајте ефективан и одличан тастер за позив на акцију са неким ЦСС и јКуери које привуку пажњу корисника и привуку га да кликне .

Кроз овај туторијал ћемо објаснити сваку линију коришћеног кода са детаљима и надамо се да ће вам бити од користи. Следећи водич користи ХТМЛ, ЦСС и јКуери са нивоом тежине Бегиннер и процењено време завршетка 45 минута.

Преузмите упутства (.зип) или Демо

Део И - Креирајте слику дугмета

У овом првом делу ћемо вам показати како да креирате потребне слике помоћу Пхотосхопа у једноставним једноставним корацима. Почнимо.

Направите нови Пхотосхоп документ ширине 580пк и висине 130пк. Иди на Поглед > Нев Гуиде затим, подесите Ориентатион до Хоризонтално анд тхе Позиција до 65пк.

Креирајте више водича; сваки за врх, дно, лево и десно. Када завршите, ваша слика треба да има следеће водиче:

Чини се да водичи раздвајају ваше платно на горњу и доњу половину. Изаберите Роундед Рецтангулар Тоол, подесите Радиус до 5пк и нацртајте правоугаони облик на горњој половини платна.

Промените стилове за Градиент Оверлаи и Удар.

Изаберите Тип Алат и тип “Преузимање” као узорак текста у оквир који сте креирали. Поравнајте текст на средину средине оквира и ваш излаз би требао изгледати овако:

Завршили смо креирање првог стања дугмета за преузимање. Омогућава направите нову групу и премести све слојеве у њега. Удвостручите групу и онда га позиционирати под прву групу. створили смо.

Идите до дуплициране групе и промените Градиент Оверлаи и Удар стил наше друге правоугаоне кутије (која лежи) са следећим подешавањима:

Када изаберете другу групу, користите Потез Алат за помицање цијеле правокутне кутије до друге половице платна.

То је то! Завршили смо са првим делом. Сачувајте слику као довнлоад.пнг и испалите свој омиљени едитор кодова.

Скачать ПСД

ИИ део - ХТМЛ

Корак 1 - Припремите потребне датотеке

Креирајте фасциклу и дајте јој име. Назват ћемо га јКуериЦаллТоацтион за овај водич. У јКуериЦаллТоацтион фолдер, креирајте следеће датотеке / фасцикле:

1. Празан ХТМЛ фајл, индек.хтмл
2. Празан ЦСС фајл, стиле.цсс
3. Празан ЈаваСцрипт фајл, сцрипт.јс
4. Фолдер, именом "имагес"
5. Плаце довнлоад.пнг у имагес фолдер.

Корак 2 - Линк индек.хтмл са ЦСС & ЈС

Повежимо наш ЦСС и ЈаваСцрипт до индек.хтмл. Ставите их унутра . Почињемо са ЦСС датотека:

затим најновија верзија јКуери из Гооглеовог спремишта АЈАКС библиотека:

и коначно наше ЈаваСцрипт датотека :

Сада наше требало би да изгледа овако:

Ставимо кодове за наше дугмиће унутра таг:

Објашњење: Направили смо параграфе за два дугмета, од којих је сваки замотан са хипервезом у. Линија 1: цласс = "буттон1" налази се унутра , док линија 2: цласс = "буттон1" налази се унутра

 .буттон1 / * Буттон витх ЦСС онли * / бацкгроунд: урл (имагес / довнлоад.пнг) 0 0; хеигхт: 65пк; видтх: 580пк; дисплеј блок;  .буттон1: ховер / * моусеОвер * / бацкгроунд: урл (имагес / довнлоад.пнг) 0 65пк;  

 .буттон2, .буттон2 а бацкгроунд: урл (имагес / довнлоад.пнг) 0 -65пк; хеигхт: 65пк; видтх: 580пк; дисплеј блок;  .буттон2 а бацкгроунд-поситион: 0 0;  

 $ (доцумент) .реади (фунцтион () $ ('. буттон2 а'). ховер (фунцтион () $ (тхис) .стоп (). анимате ('опацити': '0', 500); , фунцтион () $ (тхис) .стоп (). анимате ('опацити': '1', 500);););