Problem: Fluid Button Width

easy
15 min
Build a button component whose width scales fluidly with the viewport between defined minimum and maximum values using the CSS clamp() function.

Problem description

You have a standalone <button> element. Write CSS rules so its width adjusts based on the viewport width, never falling below 150px and never exceeding 300px.

Goal

Implement CSS in styles.css to apply the clamp() function, ensuring the button’s width is responsive within the specified bounds.

Constraints

  • Do not modify the HTML structure.

  • Use only CSS (no JavaScript is allowed).

  • Button width must be between 150px and 300px.

  • Width should scale proportionally to viewport width between these limits.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.

Problem: Fluid Button Width

easy
15 min
Build a button component whose width scales fluidly with the viewport between defined minimum and maximum values using the CSS clamp() function.

Problem description

You have a standalone <button> element. Write CSS rules so its width adjusts based on the viewport width, never falling below 150px and never exceeding 300px.

Goal

Implement CSS in styles.css to apply the clamp() function, ensuring the button’s width is responsive within the specified bounds.

Constraints

  • Do not modify the HTML structure.

  • Use only CSS (no JavaScript is allowed).

  • Button width must be between 150px and 300px.

  • Width should scale proportionally to viewport width between these limits.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.