How to make a responsive button in CSS?

To create a responsive button in CSS, you can use the following code:

button {
  display: block;
  width: 100%;
  padding: 12px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background-color: #4CAF50;
  border: none;
  border-radius: 4px;
}

button:hover {
  background-color: #45a049;
}

This code will create a button that spans the full width of its container and has a padding of 12 pixels, a font size of 18 pixels, and a bold font weight. The button will have a white text color and a green background color, and it will have rounded corners with a border radius of 4 pixels. When the button hovers over, the background color will change to a slightly darker shade of green.

To make the button responsive, you can use media queries to adjust the styling of the button based on the width of the screen. For example, you could use the following code to reduce the font size of the button on smaller screens:

@media only screen and (max-width: 600px) {
  button {
    font-size: 16px;
  }
}

This will change the font size of the button to 16 pixels on screens with a width of 600 pixels or less. You can adjust the media query to target different screen sizes and adjust the styling of the button accordingly.