The CSS buttons I designed looked amazing on desktop, but when viewed on mobile devices, they appear unappealing and fail to utilize the specified styles. How can I ensure consistent button styling across all devices using CSS?
Below is the code for the buttons that displayed perfectly in the browser:
input[type="button"]
{
width: 416px;
border: none;
color: #fff;
font-size: 1em;
padding: .5em;
margin: 5px 0 5px 0;
border-radius: 3px;
font-weight: bold;
line-height: 40px;
background: #00aeff;
}
input[type="button"]:hover
{
background: #00a0db;
}
However, this is how they appeared on various mobile pages.