CSS3 Buttons

by XarX

HTML

<table>
<tr>
  <td>
    <button id="Range1" onclick="setRange(4,2,1);" class="button">15m</button>
    <button id="Range2" onclick="setRange(2,0,2);" class="button">30m</button>
    <button id="Range3" onclick="setRange(0,-4,3);" class="button">60m</button>
    <button id="Range4" onclick="setRange(-1,-8,4);" class="button">120m</button>
    <button id="Range5" onclick="setRange(-3,-12,5);" class="button">150m</button>
    <button style="float:right;" id="range" class="button" disabled>???</button>
    </td>
</tr>
<tr>
  <td>
    <button id="Movement1" onclick="setMovement(4,1);" class="button">Unbeweglich</button>
    <button id="Movement2" onclick="setMovement(2,2);" class="button">Stillstehend</button>
    <button id="Movement3" onclick="setMovement(0,3);" class="button">Leicht</button>
    <button id="Movement4" onclick="setMovement(-2,4);" class="button">Schnell</button>
    <button id="Movement5" onclick="setMovement(-4,5);" class="button">Sehr_Schnell</button>
    <button style="float:right;" id="movement" class="button" disabled>???</button>
  </td>
</tr>
<tr>
  <td>
    <button id="inBattle2" onclick="setInBattle(0,2);" class="button">Freistehend</button>
    <button id="inBattle1" onclick="setInBattle(-2,1);" class="button">Getümmel</button>
    <button style="float:right;" id="setInBattle" class="button" disabled>???</button>
  </td>
</tr>
<tr>
  <td>
    <button id="Size1" onclick="setSize(-8,1);" class="button">Winzig</button>
    <button id="Size2" onclick="setSize(-6,2);" class="button">Sehr klein</button>
    <button id="Size3" onclick="setSize(-4,3);" class="button">Klein</button>
    <button id="Size4" onclick="setSize(-2,4);" class="button">Mittel</button>
    <button id="Size5" onclick="setSize(0,5);" class="button">Groß</button>
    <button id="Size6" onclick="setSize(2,6);" class="button">Sehr Groß</button>
    <button style="float:right;" id="size" class="button" disabled>???</button>
  </td>
</tr>
<tr>
  <td>
    <button id="Size21"...

CSS

.button {
    background-color: #7db9e8;
    background: -webkit-linear-gradient(#7db9e8, #51A1E0);
    background: linear-gradient(#7db9e8, #51A1E0);
    border: solid 1px #1E5799;
    border-radius: 3px;
    box-sizing: border-box;
    box-shadow: inset 0 0 1px #fff;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font: bold 14px/32px'Open Sans', sans-serif;
    height: 34px;
    outline: none;
    padding: 0 5px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #1E5799;
    width: 150px;
}
.button_xs {
    background-color: #7db9e8;
    background: -webkit-linear-gradient(#7db9e8, #51A1E0);
    background: linear-gradient(#7db9e8, #51A1E0);
    border: solid 1px #1E5799;
    border-radius: 3px;
    box-sizing: border-box;
    box-shadow: inset 0 0 1px #fff;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font: bold 14px/32px'Open Sans', sans-serif;
    height: 34px;
    outline: none;
    padding: 0 5px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #1E5799;
    width: 75px;
}
.button:hover {
    background-color: #51A1E0;
    background: -webkit-linear-gradient(#51A1E0, #2689D7);
    background: linear-gradient(#51A1E0, #2689D7);
    border: solid 1px #1A4B84;
    box-shadow: inset 0 0 2px #fff;
}
.button:active {
    position: relative;
    top: 1px;
}
.button:focus {
    border: solid 1px #000;
}
.button_xs[disabled] {
    background: #ccc;
    border: solid 1px #888;
    color: #999;
    cursor: default;
    text-shadow: 1px 1px 1px #fff;
    width: 100px;
}
.button[disabled] {
    background: #ccc;
    border: solid 1px #888;
    color: #999;
    cursor: default;
    text-shadow: 1px 1px 1px #fff;
    width: 200px;
}
.button_clicked {
    background-color: #fff;
    background: -webkit-linear-gradient(#fff, #fff);
    background: linear-gradient(#fff, #fff);
    border: solid 1px #1E5799;
...

JavaScript

var range_dmg = 0, range_hit = 0;
var movement_hit = 0;
var battle_hit = 0;
var size_hit = 0, size2_hit = 0;
var result_dmg = 0;
var result_hit = 0;
var vision_hit = 0, vision2_hit = 0;
var at_hit = 0, at = 30;
function setRange(dmg,hit,id_) {
	range_dmg = dmg;
  range_hit = hit;
  document.getElementById("range").firstChild.data = dmg + " | " + hit;
  calcResult();
  changeClass("Range",5,id_);
  
}

function setMovement(i,id_) {
	movement_hit = i;
  document.getElementById("movement").firstChild.data = i;
  calcResult();
  changeClass("Movement",5,id_);
}

function setInBattle(i,id_) {
	battle_hit = i;
  document.getElementById("setInBattle").firstChild.data = i;
  calcResult();
  changeClass("inBattle",2,id_);
}

function setSize(i,id_) {
	size_hit = i;
  document.getElementById("size").firstChild.data = i;
  calcResult();
  changeClass("Size",6,id_);
}

function setSize2(i,id_) {
	size2_hit = i;
  document.getElementById("size2").firstChild.data = i;
  calcResult();
  changeClass("Size2",3,id_);
}

function setVision(i,id_) {
	vision_hit = i;
  document.getElementById("vision").firstChild.data = i;
  calcResult();
  changeClass("Vision",5,id_);
}

function setVision2(i,id_) {
	vision2_hit = i;
  document.getElementById("vision2").firstChild.data = i;
  calcResult();
  changeClass("Vision2",4,id_);
}

function calcResult() {
	result_dmg = range_dmg;
	result_hit = range_hit + movement_hit + size_hit + size2_hit + battle_hit + vision_hit + vision2_hit + at_hit;
  var result_dmg_boost = 0;
  if (result_hit > 19) result_dmg_boost = result_hit - 19;
  document.getElementById("result_dmg").firstChild.data = "TP:_" + result_dmg + "_(" + (result_dmg+result_dmg_boost) + ")";
  document.getElementById("result_hit").firstChild.data = "AT:_" + result_hit + "_(" + (result_hit-result_dmg_boost) + ")";;
}

function setAT(add,id_) {
	button_at = document.getElementById("at2");
  if (id_ == 2) {
  	if (hasClass(button_at, "button_clicked")) {
    	at_hit = 0;	
     ...