ウェブサイトのメニューボタンの画像をCSSに変換する方法

Question

私は現在、ボタンの背景として使用している画像を持っていますが、ボタンをクリックすると、それが押されている印象を与えるように変わります。ページのレスポンスを向上させたいので、ブラウザウィンドウのサイズが変更されたときにもサイズが変更され、この方法を使用してもそのようには見えません。

問題の画像は

を下回っている、これは同様の結果を与えることをCSSで行うことができる方法はありますか？

私はこれをやろうとしましたが、ブラウザのウィンドウが小さくなると、テキストがバックグラウンドで縮小しないという新しい問題があります。

#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 1

あなたは、例えば、画面サイズに応じて、あなたのDOMのためのCSSを変更するためにCSS Media Queriesを使用することができます。

次の例では、基本概念を示すためにコードを簡略化しようとしました。 ブラウザウィンドウのサイズを変更すると、フォントサイズが変更されます。

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; 
    } 
} 

Answer 2

#buttons li a { 
    font-size:3vw; 
} 

VW内の指定の幅と高さ（ビューポートの幅）/ VH（ビューポートの高さ）は、画面のパーセンテージで指定することに似ている（ボタンの容器のパーセンテージと比較して）

Answer 3

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

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

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

Answer 4

ブートストラップフレームワークを使用しようと、頭痛を持っていないために、それは100％の応答となります。