How to add Choose Size Buttons in a Product form

Here is the working example

Demo


HTML

<span id="contain"><span class="size-option"><span class="size-option-size">S</span></span>
<span class="size-option"><span class="size-option-size">M</span></span>
<span class="size-option"><span class="size-option-size">L</span></span>
<span class="size-option"><span class="size-option-size">XL</span></span>
<span class="size-option"><span class="size-option-size">XXL</span></span></span>

CSS

.size-option, .size-option-disabled{
border:1px solid #b3b5b5;
 </span>cursor:pointer;
display:inline-block;
font-size:16px;
margin-bottom:8px;
margin-right:1px;
  padding-bottom:5px;
  padding-top:5px;
  padding-left:10px;
  padding-right:10px;
  text-align:center;
  min-width:14px;
 }

.size-option-disabled{
  border:1px solid #e6e7e9;
  color:#e6e7e9;
  cursor:default;
 }


.size-option-selected{
  border:1px solid #b3b5b5;
 cursor:pointer;
 display:inline-block;
 font-size:16px;
 margin-bottom:8px;
 margin-right:1px;
 padding-bottom:5px;
 padding-top:5px;
 padding-left:10px;
 padding-right:10px;
 text-align:center;
 min-width:14px;
 background-color:#000000 !important;
 color:#FFFFFF;
}

.size-option:hover{
 background-color:#75797b;
 color:#FFFFFF;
}

.size-option.selected {
 color: #FFFFFF;
}

.size-option-disabled {
 cursor: pointer;
 font-size: 16px;
 text-align: center;
}