Radio button re-styled to 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

Radio button re-styled to 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">

input[type=radio]{
   display:none;
}
input[type=radio] + label{
   cursor:pointer;
}
input[type=radio]:checked + label{
   background-color:green;
}
.but1{<!--  w w w.j a  va  2s . c  o  m-->
   background-color:#009;
   color:#FFF;
   border:none;
   border-radius:15px;
   width:200px;
   height:50px;
   font-size:18px;
   font-weight:bold;
   border-radius:15px;
   text-align:center;
   padding:8px;
   font-family:Verdana, Geneva, sans-serif;
   float:left;
   margin-left:10px;
}


      </style> 
 </head> 
 <body> 
  <form action="Untitled2.php" method="post"> 
   <input id="fb1" type="radio" name="time" value="all day" checked> 
   <label class="but1" for="fb1"> Available <br> All day </label> 
   <input id="fb2" type="radio" name="time" value="between 8-12"> 
   <label class="but1" for="fb2"> Between <br> 8am - 12am </label> 
   <input id="fb3" type="radio" name="time" value="between 12-4"> 
   <label class="but1" for="fb3"> Between <br> 12pm - 4pm </label> 
   <input name="submit" type="submit"> 
  </form>  
 </body>
</html>

Related Tutorials