pricing component with HTML CSS & JS with smooth animation transitions

Community feedback

• 

  

  Alex•2,010

  @AlexKMarshall

  Posted over 3 years ago

  Hey this looks great.

  The semantics are pretty much perfect. The only thing I'd maybe change is to make the features in each card into a list, rather than just a set of spans.

  On the issue of your layout changing when you click on a button, that's because you have a focus style of border: 2px dashed black. Changing a border size will change the size of an element, so everything else will redraw. This will be slow when animating, and you'll get jumps. You have two options to avoid this. Either you always have a border, and you just change border-color from transparent to some other value. That way the size won't change, only whether you can see the border Or, use outline instead. Outline is not calculated in the element size so won't cause any layout shift.

  The other thing to change there would be to use :focus-visible rather than :focus so it only appears on keyboard interaction, not on mouse click.

  One other minor point. Your pricing toggle is great, well done for using a fieldset/radio. But, I would expect to be able to click anywhere on the switch to toggle it. At the moment you have to carefully click on one side or the other. To improve the UX of that you could make both inputs span the whole width of the toggle control. And then make the z-index of the unchecked one higher than the checked one. That way, whenever you click anywhere on the toggle it will switch the value of it. Something like:

  input[type='radio']:not(:checked) {
    z-index: 2;
  }
  

  Finally if you wrap your prices in an <output> tag with a label (aria-label or visually hidden label) then when they change because you've toggled, those changes will get read out by a screen reader.

  11

  Marked as helpful
• 

  Aakash Verma•9,500

  @skyv26

  Posted over 3 years ago

  Hi! Mohsin, Bro I checked your work and you did it really nice.

  My personal suggestion

  Please event listener on toggle button container. As I checked that if I click on the left space properly only then toggle works properly and same for right blank space to reverse back. It should be working smooth. So I think it need to be fix.

  Your question's answer

  button:focus {
      border: 2px dashed black;
      opacity: .75;
  }
  

  from above rule Line No 204 replace border with outline like below:

  button:focus {
      outline: 2px dashed black;
      opacity: .75;
  }
  

  Then it will work perfectly.

  I think my suggestion, solution will help you (I am sure it will solve, I have tested)

  Good Luck

  01