Как сделать кнопки в виде квадратиков и списка?

Question

[75db77]

Временно кнопкам просто прописал названия Grid и List:

<button value="product_card_frontpage" class="grid-view">Grid</button>
<button value="product_card_full_width" class="list-view">List</button>

Но в конечном результате кнопки не должны иметь надписей Grid и List. А они должны выглядеть вот так:

Answer 1

[Sergei Nazarenko]

Держи лови
но с SVG вариант лучшее.

Comments

[Ankhena]

Обратите внимание на то, что div нельзя вкладывать ни в span ни в button.

[Sergei Nazarenko]

Ankhena, нельзя - это не то слово, я бы сказал не рекомендуется. Нельзя это когда ты сделал и оно не работает или ошибку выдаёт. Честно не заморачивался, как автокомплит сделал так и оставил.
PS: В любом случае приведенный мной пример не рекомендуется, это так чисто для ознакомления, о чем я написал что лучше использовать svg. Ей точно также абсолютно легко манипулировать с помощью стилей и логику не ломает.

[Ankhena]

Sergei Nazarenko,

или ошибку выдаёт.

Именно это оно и делает. Откройте валидатор.

Нельзя это когда ты сделал и оно не работает

Нет гарантии, что все браузеры будут одинаково обрабатывать невалидный код.

[Sergei Nazarenko]

Ankhena,

Нет гарантии, что все браузеры будут одинаково обрабатывать невалидный код.

тут согласен но это не критично и не вызовет падения. Может не отрисоваться элемент , верстка поедет и тд. Но как видно на примере все прекрасно работает и даже нет никакого намека на ошибку.

Именно это оно и делает. Откройте валидатор.

Я тут про браузер говорил, и что бы валидатор не писал пользователь может про него ничего не знать а браузер в этот момент преспокойно хавает и даже не гундит. Ошибка это когда происходит падение и тебе как бы эй чувак я не могу выполнить то что ты написал потому что у тебя в строке 28 вот тут херня написана. А так - это тупо скрытый варнинг.

Answer 2

[Ankhena]

Лучший вариант: взять SVG и вставить фоном (или mask) и/или псевдоэлементом.
Текст для читалок нужно оставить: обернуть его в span и доступно скрыть (гуглите: паттерн visually-hidden).

Цвет при этом легко меняется масками. https://codepen.io/noahblon/post/coloring-svgs-in-...

Альтернатива похуже: svg инлайном (из спрайта или стека). Про текст аналогично.
Этот вариант может получить больший вес если нужна затейливая анимация.

Альтернатива ещё похуже: рисовать всё это лишними span'ами.

Answer 3

[Dino Winchester]

Самый простой и наилучший способ - это просто добавить нужные SVG иконки в кнопки. Можно было бы конечно и бекграундами, но судя по скрину, нужно изменение цвета иконок при hover эффекте, поэтому будет лучше использовать Single Inline SVG или использовать спрайт с иконками.

<button value="product_card_frontpage" class="grid-view">
   <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="......" />
   </svg>
</button>

<button value="product_card_full_width" class="list-view">
   <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="......" />
   </svg>
</button>

Можно и через бекграунды вставлять и менять цвет иконок, например с помощью css filter, но это на мой взгляд какое-то странное решение. Есть ещё вариант с css масками, но нужно смотреть поддержку этого свойства.

Разумеется есть и другие варианты кроме использования Inline SVG. Например использование дополнительных html тегов для создания "иконок" или реализация с помощью градиентов/теней/псевдоэлементов/etc. Однако нужно понимать, что есть "адекватные" и "правильные" решения задач, а есть "творческие" подходы, которые не всегда и не везде уместны.

И если реализовывать иконки с помощью CSS, то можно обойтись по одному span тегу + два псевдоэлемента на каждую иконку:

Иконки на CSS

<span class="icon-grid"></span>

* {
     box-sizing: border-box;
}

.icon-grid {
     position: relative;
     display: block;
     transform: scale(5);
     height: 10px;
     width: 10px;
}

.icon-grid::after,
.icon-grid::before {
     content: "";
     display: block;
     position: absolute;
     width: 10px;
     height: 4px;
     border-right: 4px solid red;
     border-left: 4px solid red;
     top: 0;
     left: 0;
}

.icon-grid::before {
     top: 6px;
}

<span class="icon-list"></span>

* {
     box-sizing: border-box;
}

.icon-list {
     transform: scale(5);
     position: relative;
}

.icon-list,
.icon-list::after,
.icon-list::before {
     display: block;
     width: 20px;
     height: 2px;
     border-radius: 3px;
     background: #3f51b5;
}
.icon-list::after,
.icon-list::before {
     content: "";
     position: absolute;
     top: -6px;
}
.icon-list::after {
     top: 6px;
}

Основной параметр размера иконок зависит от значения scale(<length>) в свойстве transform. Можно конечно сделать иконки и по другому(возможно даже лучше), но как пример сгодится.