css

.player-button {
    height: 80px;
    width: 200px;
    border-radius: 4px;
    border: 1px solid $black;
    display: inline-block;
    line-height: 80px;
}

.player-selector {
    margin: 250px auto 0;
    text-align: center;
}

html

<div class="player-selector">
            <div class="player-button player-class-bMage">Black Mage
            </div>
            <div class="player-button player-class-wMage">White Mage
            </div>
            <div class="player-button player-class-knight">Archer
            </div>
            <div class="player-button player-class-archer">Knight
            </div>
            <div class="selector-text">

                <h1>Choose your hero</h1>
            </div>
        </div>

jQuery

"use strict";


///// Constructors /////////////////////////////////
////////////////////////////////////////////////////

function BlackMage() {
	this.hp = 12;
	this.mp = 20;
	this.str = 2;
	this.magic = 20;
	this.def = 6;
}

function WhiteMage () {
	this.hp = 14;
	this.mp = 24;
	this.str = 2;
	this.magic = 18;
	this.def = 6;
}

function Knight () {
	this.hp = 22;
	this.mp = 2;
	this.str = 18;
	this.magic = 2;
	this.def = 14;
}

function Archer () {
	this.hp = 16;
	this.mp = 10;
	this.str = 10;
	this.magic = 10;
	this.def = 8;
}





///// Interactions /////////////////////////////////
////////////////////////////////////////////////////



$('.player-class-bMage').click(function () {
	player = new BlackMage();
	// $('.player-selector').remove();
});