looong buttons

by stot

HTML

<div class="p-button-row">
<a href="#" class="p-button-blue p-button">Evolve</a>
<a href="#" class="p-button-blue p-button">Sell</a>
<a href="#" class="p-button-blue p-button">Fuse</a>
</div>

<a href="#" class="p-button-blue">long button</a>

<a class="ui-button beta-button--sub beta-button" href="#">
    <span class="button-content">Loooooooong button</span>
</a>

<a class="ui-button beta-button--sub beta-button" href="#">
    <span class="button-content">PLAY</span>
</a>

<div id="buttons" style="text-align:center;white-space:nowrap">
<a class="ui-button beta-button--sub beta-button" href="#">
    <span class="button-content">Evolve</span>
</a>

<a class="ui-button beta-button--sub beta-button" href="#">
    <span class="button-content">Sell</span>
</a>
    <a class="ui-button beta-button--sub beta-button" href="#">
    <span class="button-content">Fuse</span>
</a>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Carter+One);

.p-button {
    white-space:nowrap;
    color:white;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    font-size: 22px;
    line-height: 56px;
    text-decoration:none;
    font-family: 'Carter One';
    text-shadow: 0 0 4px #000, 0 0 8px #000;
}

.p-button-row {
    display: flex;
    justify-content: space-around;
}
.p-button-row a {
    width:30%;
    margin: auto;
}

.p-button-blue {
border-style: solid;
border-width: 10px 14px;
-moz-border-image: url(http://local.playa.cc/pic/button-blue.png) 10 14 stretch;
-webkit-border-image: url(http://local.playa.cc/pic/button-blue.png) 10 14 stretch;
-o-border-image: url(http://local.playa.cc/pic/button-blue.png) 10 14 stretch;
border-image: url(http://local.playa.cc/pic/button-blue.png) 10 14 fill stretch;
}

a {
    color: white;
    font-size:smaller;
}

.ui-button span, .ui-cancel span {
    background-repeat: no-repeat;
    display: inline-block;
    outline: 0 none;
}

.ui-button, .ui-cancel {
    background: none repeat scroll 0 center rgba(0, 0, 0, 0);
    border: 0 none;
    cursor: pointer;
    display: inline-block;
    height: auto;
    margin: 0;
    outline: 0 none;
    overflow: visible;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.beta-button--sub {
    background: url("http://local.playa.cc/pic/Long_Button01.png") no-repeat scroll 100% -87px transparent;
    /* bottom: 13px; */
    display: inline-block;
    height: 56px;
    margin-left: 30px;
    margin-top: 0;
    padding-right: 50px;
    position: relative;
    z-index: 10;
}

.beta-button--sub:hover {
    //background-position: 100% -237px;
}
.beta-button--sub:hover .button-content {
    //background-position: 0 -84px;
}
.beta-button--sub .button-content {
    background-image: url("http://local.playa.cc/pic/Long_Button01.png");
    background-position: -17px -17px;
    padding-left: 30px;
    font-size:...

JavaScript

window.addEventListener('resize', resize);

resize();

function resize() {

    // calculate width and height
    var maxWidth = window.innerWidth; // Max width for the image
    var maxHeight = window.innerHeight; // Max height for the image
    var width = document.getElementById("buttons").scrollWidth;
    var height = document.getElementById("buttons").offsetHeight;

    // calculate ratio
    var ratio = [maxWidth / width, maxHeight / height];
    ratio = Math.min(ratio[0], ratio[1]);

    
    
    ratio = maxWidth/width;
console.log(maxWidth + ', ' + width + ', ' + ratio);
    console.log($('#buttons').outerWidth());
    console.log(document.getElementById('buttons').scrollWidth);
    // adjust canvas size
    //canvas.style.width = Math.floor(width * ratio) + 'px';
    //canvas.style.height = Math.floor(height * ratio) + 'px';
    $('#buttons').css('transform', 'matrix('+ratio+',0,0,'+ratio+',0,0)');

};