Making radio buttons look like buttons instead

Question

I would like to have a set of radio buttons for a donation form, however I want them to look like buttons instead of the circle dials.

What is the best approach to m

Answer 1

It can be done with CSS and without the need of a large framework. I have done this with checkboxes and radio buttons.

This works without adding new HTML, or bringing in any JS libraries. => jsFiddle

THE NEW ORDER OF THE HTML

This is the ten minute hacky version, you can clean it up even further, but it shows a good example of how simple it is.

.donate-now {
  list-style-type: none;
  margin: 25px 0 0 0;
  padding: 0;
}

.donate-now li {
  float: left;
  margin: 0 5px 0 0;
  width: 100px;
  height: 40px;
  position: relative;
}

.donate-now label,
.donate-now input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.donate-now input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

.donate-now input[type="radio"]:checked+label,
.Checked+label {
  background: yellow;
}

.donate-now label {
  padding: 5px;
  border: 1px solid #CCC;
  cursor: pointer;
  z-index: 90;
}

.donate-now label:hover {
  background: #DDD;
}

  

    
    $25
  
  

    
    $50
  
  

    
    $75
  
  

    
    $100
  
  

    
    other: