Can such a button be made without js? How?

  • 0


    On top of the button there is a transparent input checkbox. By clicking on it, the favorite_border icon changes to favorite. And how to make the text color and gradient under the white background of the button also change?

    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;
    }
    JavaScript Gabriel Acosta, Aug 11, 2019

  • 2 Answers
  • 0
    I'm wondering when the page is reloaded, will the like remain?

    I do not recommend doing bikes with triangular wheels. It's a button. She may have conditions.



    That's honestly zadolbalo. People are doing experimental things. draw pictures in css, while others think that this is how it should be, without understanding, they begin to make sliders in css and so on.
    It's nothing that a checkbox is an element of a form. It can't exist in a vacuum?
    Anonymous

  • 0
    On top of the button there is a transparent input checkbox.


    Not only on top, but in front of it and accessible (visually-hidden)

    And then through : checked + label or label outside and then + span
    Noah Alvarez

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!