Как реализовать такую кнопку?

Question

[tigra]

нужно при наведении такую кнопку, но дело в том, что before и after я уже использовал при добавлении треугольников по бокам. Как ещё икнонку сделать жёлтой? в неактивном состоянии она фиолетовая.
Можно как то использовать несколько псевдоэлементов к одному классу?

На данный момент есть

нужно добавить иконку как то

Answer 1

[Илья Пирожок]

А что если сделать так:
Создаем тег-ссылку 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;
}

Comments

[tigra]

сделал похоже, запихнул в ссылку span пустой его растянул на 100% ширины блока и ему уже псевдоэлементы прицепил. спасибо за идею)

[Илья Пирожок]

Я все опробовал - работает. Но нужно еще сделать так:
для ссылки добавь position: relative;
Для картинки: position: absolute; top: 0; left: 0;

Answer 2

[Max]

в чем трабл?
добавить внутрь иконку?
попробуй content
псевдоэлементов куча, но я так понимаю идет речь про before и after? один тот и один тот.
Что есть на данный момент?

иконка идет картинкой или элементом i ?
можно обратиться к i при hover button'а
т.е. .button:hover i{color:yellow;} - это наведение на кнопку

можно просто окрасить .button i{color:#нужный цвет;}

Comments

[tigra]

иконка как отдельный элемент, на данный момент есть сверху (обновил вопрос)

[Max]

1.подключить библиотеку font awesome, варианты в get started
https://fortawesome.github.io/Font-Awesome/icons/

если нет доступа к меню, скажем потому что CMS, то печально, но
если есть возможность обратиться к кнопке по CSS какому то атрибуту, то обращаемся и через content вводим по unicode, который доступен при нажатии на нужную икону (будет прямо под ней на странице)

Есть вариант еще glyph icon от bootstrap'a.

Можно и картинку по идее вставить через content, но сложнее. Хоть один вариант подходит?:)

[Max]

Олег: до первой цифры был код, забыл пометить его: <i class="fa fa-нужная иконка с сайта"></i> вставляем перед текстом

[tigra]

слишком геморрно, но всё равно спасибо, в следующий раз буду сразу делать с i)

Answer 3

[Ivanq]

Первый div - формирует шестиугольник

   ______________
  /              \
 /                \
 \                /
  \______________/

Второй div в первом - "КАКОЙ ТО ТЕКСТ" и иконка