Style radio inputs as button when input is within label tag - 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

Style radio inputs as button when input is within label tag

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>fancy label or button</title> 
  <style>

img, button, label  {
   vertical-align:top;
   display:inline-block;
   transition:0.1s;
   position:relative;
   top:0;
   left:0;
}
button , label{
   font-size:90px;
   margin:15px;
   padding:0 0.5em;
   border-radius:20px;
   border:1px solid #3376AD;
   box-shadow:inset #3376AD 0 0 2px, 0 0 1px  #3376AD;
   background:linear-gradient(to top,#5AB6E9 ,#79C1E7 5px,#79C1E7 10px ,#3986BE 25px ,#3986BE);
   color:rgba(0,0,0,0.5);
   text-shadow:1px 1px 1px white, -1px -1px 1px gray
}
button:before ,label:before{
   content:'';<!--  w  w  w  .j av a 2s.c  o  m-->
   display:block;
   height:0.5em;
   margin:5px -0.4em  -0.6em;
   border-radius:20px;
   background:linear-gradient(to bottom,#C0D5E6,#3D7CB1)
}
:active {
   top:2px;
   left:2px;
}
body {text-align:center;}
img {
   box-shadow:2px 2px 5px;
}
input {
   box-shadow:1px 1px 2px white, -1px -1px 2px #333
}
input[type="radio"] {
   vertical-align:top;
   transform:scale(2);
   transform-origin:-1em -1em;
}


      </style> 
 </head> 
 <body translate="no"> 
  <p> <label for="radio0"> yes <input type="radio" id="radio0" name="groupe"> </label> <label for="radio1"> no <input type="radio" id="radio1" name="groupe"> </label> <label for="radio2"> later <input type="radio" id="radio2" name="groupe"> </label> </p> 
  <img src="https://www.java2s.com/style/demo/Firefox.png"> 
  <button> button </button>  
 </body>
</html>

Related Tutorials