Nick Fallows Nick Fallows - 4 months ago 8
CSS Question

How to convert an image for a website menu button into CSS

I have images that I am currently using as a background for a button and when the button is clicked it changes so that it gives the impression it is being pressed, however I want to make the page more responsive so that when the browser window is resized it changes size too, and using this way doesn't seem to do it.

The images in question is below

Button Image

Button Clicked Image

Is there any way this can be done in CSS to give a similar result?

I have tried to do this, however, I have a new issue that when the browser window is smaller, the text doesn't shrink with the background, am I missing something?

#buttons {
font-family:arial;
text-align:center;
color:#b5a642;
}
#buttons ul {
list-style-type:none;
padding:0;
}
#buttons li a {
width:10%;
display:block;
background-color:#7B4A18;
color:#b5a642;
padding:10px;
box-shadow: 0 -30px 50px #603913 inset;
border: 5px solid #7B4A18;
text-shadow: 0px 2px 4px #222, 0px 2px 4px #333;
}
#buttons li a:active {
background-color:603913;
box-shadow:0 -30px 50px #7B4A18 inset, 0 0 15px #222 inset;
border:5px solid #603913;
text-shadow:2px 2px 1px #706729;
}

Answer

You can use CSS Media Queries in order to change CSS for your DOM accordingly to screen size for example.

In the following example I have tried to simplify your code to show the underlying concept. The font size will change when you resize your browser window.

https://jsfiddle.net/9r2t6645/

<div id="buttons">
<ul>
  <li>Home</li>
</ul>
</div>

#buttons {
    color:blue;   
    font-size: 50px;
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
  #buttons  {
    font-size: 20px;
    color:red;
  }
}
Comments