Buttons created in HTML5 that will fit any screen resoution - css

Question

I am creating a web site for a friend and is strictly practice for me. So far I have got the banner w/ logo to fit any screen, but now I am adding buttons so a user can navigate through out the site. When zooming in or out the buttons go all over the place. I am using an external CSS sheet to help format my HTML. Here is my CSS3 code
/* W & W Hydrographics, LLC. */
/* Robert W. Anderson HTML 5.0 */
.mybutton {
display: inline-block;
position: relative;
margin: 10px;
padding: 0 20px;
text-align: center;
text-decoration: none;
font: bold 30px/35px Arial, sans-serif;
box-shadow:#000 4px 4px 5px;
}
/* Our Gallery */
.gallery {
position:absolute;
left:5%;
top:5%;
color: #F5DA62;
background: #3F403D;
}
/* Available Patterns */
.patterns {
position:absolute;
left:300px;
top:230px;
color: #F5DA62;
background: #3F403D;
}
/* Contact Us */
.contact {
position:absolute;
left:650px;
top:230px;
color: #515151;
color: #F5DA62;
background: #3F403D;
}
body {
background-size: 100%
}

Answer 1

You can use CSS3 to find the width of the screen and adjust the size of the buttons(again, according to the size).Here is a small explanation of an example just so you can unserstand.Suppose I had a button with id #button with a 300px width like this-
#button{
width:300px;
}
If i wanted to change the width to 100px in mobiles(mobiles have average width 470px;) I can do it like this-
#media (max-width: 470px) {
#button{
width:300px;
}
}
You can use the same logic to adjust size of other elements and even multiple elements at the same time like this-
#media (max-width: 470px) {
#button{
width:300px;
}
#button2{
width:300px;
}
#someelement{
color:#C30;
}
}
If you didnt understand a part of my answer, just comment. I am free to answer more doubts.