@tostershmoster

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

5fac0a9c3ca77243396561.jpeg

Поверх кнопки прозрачный инпут чекбокс. По нажатию на него меняется иконка 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;
}
  • Вопрос задан
  • 554 просмотра
Решения вопроса 2
@Froggyweb
Мне вот интересно при перезагрузке страницы лайк останется?
Не рекомендую заниматься великами с треугольными колесами. Это кнопка. У нее могут быть состояния

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

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

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

Войти через центр авторизации
Похожие вопросы