Widget:TestWidget

<style> .mw-ui-button > * {

 pointer-events:none;

} .mw-ui-button .icon {

 height:20px;

} .mw-ui-button .icon + span {

 vertical-align:middle;

} .mw-ui-button.mc-button {

 position:relative;

} .mw-ui-button .mc-icon {

 height:40px;

} .mw-ui-button .mc-icon + span {

 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 color: white;
 text-shadow: -1px -1px black, 1px -1px black, -1px 1px black, 1px 1px black;

} </style>

   <label
     class="mw-ui-button mc-button"
     title="5th Circle"
     data-key="maxlimitbreak"
     data-value="4">
     <img class="mc-icon" src="/images/6/69/Icon_CircleRelease_02.png">
     50
   </label>
   <label
     class="mw-ui-button  mc-button"
     title="Mana Spiral"
     data-key="maxlimitbreak"
     data-value="5">
     <img class="mc-icon" src="/images/6/69/Icon_CircleRelease_02.png">
     70
   </label>

   <label
     class="mw-ui-button mc-button"
     title="5th Circle"
     data-key="maxlimitbreak"
     data-value="4">
     <img class="icon" src="/images/6/69/Icon_CircleRelease_02.png">
     50
   </label>
   <label
     class="mw-ui-button  mc-button"
     title="Mana Spiral"
     data-key="maxlimitbreak"
     data-value="5">
     <img class="icon" src="/images/6/69/Icon_CircleRelease_02.png">
     70
   </label>

   <label
     class="mw-ui-button avail"
     title="Shared Skill"
     data-key="sharedskill"
     data-value="1">
     <img src="/images/5/56/Icon_Skill_Share.png" class="icon">
   </label>
   <label
     class="mw-ui-button avail"
     title="No Shared Skills"
     data-key="sharedskill"
     data-value="0">
     <img src="/images/5/56/Icon_Skill_Share.png" class="icon" style="filter:grayscale(1)">
   </label>