Можно такую кнопку сделать без js? Как?

Question

[tostershmoster]

Поверх кнопки прозрачный инпут чекбокс. По нажатию на него меняется иконка favorite_border на favorite. А как сделать чтобы менялся еще цвет текста и градиент под белым фоном кнопки?

mixin like-button(params)
  .like-button__container
    .like-button
      input.like-button__image(type='checkbox' id= params.likeBtnId checked= params.likeBtnStatus)
      label(for=params.likeBtnId).material-icons.like-button-icon
      .like-button__content= params.likeBtnText

+like-button({leftCaption:   'like button',
              likeBtnId:     'likeBtnId-1',
              likeBtnText:   '2'})

+like-button({likeBtnId:     'likeBtnId-2',
              likeBtnStatus: 'checked',
              likeBtnText:   '12'})

$size: 10px;
$padd: 1px;

.like-button__container {
  width: $size*4;
  height: $size*2;
  border-radius: $size;
  background: linear-gradient(180deg, #BC9CFF 0%, #8BA4F9 100%);
  background: $DarkShade25;
  padding: $padd;
}
.like-button {
  position: absolute;
  width: $size*4 - $padd*2;
  height: $size*2 - $padd*2;
  border-radius: $size;
  background: white;
}
.like-button__content {
  display: flex;
  justify-content: center;
  padding-left: 28%;
  margin-top: 1px;
  font-family: $mainFont;
  color: $DarkShade25;
  font-size: 10px;
}

.like-button-icon {
  height: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  font-size: rem(10);
  margin-left: 4px;
  color: $DarkShade25;
}
.like-button-icon::after {
  font-family: "Material Icons";
  content: "favorite_border";
}
.like-button__image:checked + .like-button-icon::after {
  font-family: "Material Icons";
  content: "favorite";
  color: $purple;
}

.like-button__image {
  position: absolute;
  cursor: pointer;
  opacity: 0;
  width: $size*4 - $padd*2;
  height: $size*2 - $padd*2;
}

Answer 1

[Froggyweb]

Мне вот интересно при перезагрузке страницы лайк останется?
Не рекомендую заниматься великами с треугольными колесами. Это кнопка. У нее могут быть состояния

Вот честно задолбало. Люди делают экспериментальные вещи. рисуют картины на css, а другие думают что так и надо не разобравшись начинают делать слайдеры на css и пр. фигней заниматься.
Ничего что чекбокс это элемент формы Он в вакууме не может существовать?

Comments

[Юрий]

Вполне себе может, в спеке всё написано:

A form-associated element can have a relationship with a form element, which is called the element's form owner. If a form-associated element is not associated with a form element, its form owner is said to be null.

Can have ≠ must have.

[Froggyweb]

Юрий, Это поведение, но это не значит что его можно использовать как .... в проруби. Мне вот fieldset нравится по оформлению давай я его в заголовки за......

Answer 2

[Ankhena]

Поверх кнопки прозрачный инпут чекбокс.

Не поверх только, а перед ней и доступно скрытый (visually-hidden)
И дальше через :checked + label или label снаружи и тогда + span

Comments

[strelok011]

А еще можно и цифры заменять, для чекнутого и анчекнутого элемента... Но зачем? :)

[Ankhena]

strelok011,

А еще можно и цифры заменять, для чекнутого и анчекнутого элемента...

Без js? Эммм..

Но зачем? :)

без понятия, если это мне вопрос.

[strelok011]

:checked + label:after{content:""}....
это если демонстрация с изменением контента.
"Зачем" - это риторический

[Ankhena]

strelok011, ну в теории, да. Можно хранить в data следующее число..
мда..

:)