Create button group from radio button - HTML CSS CSS Form

HTML CSS examples for CSS Form:input radio button

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input radio button

Description

Create button group from radio button

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.ButtonState{display:none}
.Button{padding:3px; margin:4px; background:#CCC; border:1px solid #333; cursor:pointer;}
.ButtonState:checked + .Button{background:#fff;}


      </style> 
 </head> <!--  ww  w .j a  va2 s .  c o m-->
 <body> 
  <input type="radio" name="Button" class="ButtonState" checked id="Button1" value="1"> 
  <label class="Button" for="Button1">Button 1</label> 
  <input type="radio" name="Button" class="ButtonState" id="Button2" value="2"> 
  <label class="Button" for="Button2">Button 2</label> 
  <input type="radio" name="Button" class="ButtonState" id="Button3" value="3"> 
  <label class="Button" for="Button3">Button 3</label>  
 </body>
</html>

Related Tutorials