Need to size buttons to be bigger on phone and smaller on desktop?

https://pointoftech.com/wp-content/uploads/2024/07/btn-em-unit.png 814 258 point-admin point-admin https://pointoftech.com/wp-content/plugins/ultimate-member/assets/img/default_avatar.jpg July 18, 2024 July 18, 2024

July 18, 2024
point-admin
no comments

Sizing Buttons Responsively with HTML and CSS

Responsive button sizing with HTML and CSS To create a button that is larger on phones and smaller on desktops, you can use CSS media queries, allowing the button to adapt to different screen sizes and provide a better user experience on different devices.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Buttons</title>
<style>
.button {
padding: 10px 20px;
font-size: 16px;
}

/* Larger buttons for phones */
@media (max-width: 600px) {
.button {
padding: 15px 30px;
font-size: 20px;
}
}

/* Smaller buttons for desktops */
@media (min-width: 601px) {
.button {
padding: 8px 16px;
font-size: 14px;
}
}
</style>
</head>
<body>
<button class="button">Click Me</button>
</body>
</html>

Default button styles:

The .button class sets the default spacing and font size.
Media queries for phone:

@media (max-width: 600px) targets screens up to 600px wide and increases the spacing and font size.
Media queries for desktop: