Как реализовать такую кнопку?
А что если сделать так:
Создаем тег-ссылку a - делаем ей display: block;, задаем требуемую ширину и высоту и делаем ей фиолетовый background-color; Далее в эту ссылку помещаем img и задаем ему src=ваша рамка, полностью вся. Делаем img { display: none; } а при наведении на ссылку img { display: block; }, то есть так(размеры беру случайные)a {
    display: block; (или inline-block, попробуйте и так и так)
    width: 120px;
    height: 40px;
    padding: 10px 20px;
    background-color: фиолетовый цвет;
}

a img {
    display: none;
    width: 100%;
}

a:hover img {
    display: block;
}
в чем трабл?
добавить внутрь иконку? 
попробуй content
псевдоэлементов куча, но я так понимаю идет речь про before и after? один тот и один тот.
Что есть на данный момент?
иконка идет картинкой или элементом i ?
можно обратиться к i при hover button'а
т.е. .button:hover i{color:yellow;} - это наведение на кнопку
можно просто окрасить .button i{color:#нужный цвет;}