title: CSS: how to hide radiobutton inside button appereance?
body: <p>I've some radiobuttons: Good, Better and Best.</p>
  <p>I want to  change its appearance to a rectangle button.</p>
  <p>Like this:</p>
  <p><a href="https://i.stack.imgur.com/zC63F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zC63F.png" alt="enter image description here" /></a></p>
  <p><strong>Codepen:</strong></p>
  <p><a href="https://codepen.io/ogonzales/pen/dyvvjgx" rel="nofollow noreferrer">https://codepen.io/ogonzales/pen/dyvvjgx</a></p>
  <p>Code:</p>
  <pre><code>&lt;div class=&quot;fps-budget&quot; data-fps-budget=&quot;good&quot;&gt;
              &lt;input id=&quot;fps_good&quot; type=&quot;radio&quot; name=&quot;budget&quot; value=&quot;good&quot; class=&quot;visually-hidden&quot;&gt;
              &lt;label for=&quot;fps_good&quot;&gt;
                &lt;img data-fps-budget-img=&quot;&quot; src=&quot;//cdn.shopify.com/s/files/1/0408/5792/7834/files/Good_29ea1531-4b74-4ead-be87-8f053f8efc96_320x140.jpg?v=1601266077&quot; alt=&quot;Good.&quot;&gt;
                &lt;span class=&quot;h3&quot;&gt;Good.&lt;/span&gt;
        &lt;/label&gt;
    &lt;/div&gt;
  </code></pre>