@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. А они должны выглядеть вот так:

63263758982e4971227891.png
  • Вопрос задан
  • 236 просмотров
Решения вопроса 3
nazares
@nazares
Software Engineer
Держи лови
но с SVG вариант лучшее.
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Лучший вариант: взять SVG и вставить фоном (или mask) и/или псевдоэлементом.
Текст для читалок нужно оставить: обернуть его в span и доступно скрыть (гуглите: паттерн visually-hidden).

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

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

Альтернатива ещё похуже: рисовать всё это лишними span'ами.
Ответ написан
Комментировать
mizutsune
@mizutsune
I will live forever in the flame of your eyes.
Самый простой и наилучший способ - это просто добавить нужные 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. Можно конечно сделать иконки и по другому(возможно даже лучше), но как пример сгодится.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
22 нояб. 2024, в 08:04
1 руб./за проект
22 нояб. 2024, в 06:06
1500 руб./в час
22 нояб. 2024, в 06:04
1 руб./за проект