Как сверстать такую кнопку?

Question

[fryette]

Пытаюсь сверстать такую кнопку
habrahabr.ru/post/189570
но увы,никак не выходит,точнее выходит,но по нажатию ничего не происходит.(внешний вид полностью совпадает,но увы без кнопки выбрать)
В чем может быть ошибка?
Для чего в примерах указан код JS(вконце статьи),пытался добавить его,но увы,не помогло.
Буду безумно благодарен кто укажет новичку в этом деле,в чем может быть ошибка.

Answer 1

[Push Pull]

вот одна из ссылок статьи codepen
берете и используете, ничего не теряете, и все будет работать

Answer 2

[andreloster]

В конце статьи есть сорцы, их берете и используете!

Answer 3

[Дмитрий Клусевич]

код эмулирует поведение input. Без js толкового, кроссбраузерного решения нет. Тут fileApi используется, штука относительно новая. Я бы посоветовал делать jquery + css, есть решение более компактные. Правда без нативного js. алгоритм прост 1. Поменяем input на псевдо-элемент. 2. По клику псевдо-элемент отрабатыаем событие input 3. выводим результат(путь к файлу), если надо.