I've noticed a consistent pattern in the games I download from the Google Play Store - they all have a background image at the menu with clickable buttons. When testing these games on different devices, I found that the backgrounds didn't stretch or look out of place, and the buttons adjusted themselves based on the device size (whether it's a tablet or a regular phone). Here is my experiment:
<body>
<div class="wrapper">
<div class "option1"><button>1</button></div>
<div class "option2"><button>2</button></div>
<div class "option2"><button>3</button></div>
</div>
</body>
CSS:
.wrapper button{
width: 33%;
height: 40%;
margin: auto;
display: inline;
}
body{
width: 100%;
height: 100%;
background-image: url("http://www.uiupdates.com/wp-content/uploads/2015/03/game-background.jpg")
}
Here is what I am aiming for:
The image linked above illustrates my goal - everything should resize to fit the screen perfectly, even if there was a logo on the background. The design of the buttons can be experimented with in terms of colors and textures.
EDIT: Avoid using pixels for button dimensions as they may appear too big or small on different mobile screens. Using percentages is the way to go for responsive design.