iPhone style button

by gravof

HTML

<div id="controls">
    <p>
        <label>Original width:</label>
        <input id="ow" type="number" value="14">
    </p>
    <p>
        <label>Transformed width:</label>
        <input id="tw" type="number" value="30">
    </p>
    <p>
        <label>Triangle height modifier:</label>
        <input id="hm" type="number" step="0.1" value="0.8">
    </p>
    <p>
        <label>Triangle horizontal offset:</label>
        <input id="ox" type="number" step="0.1" value="1.4">
    </p>
    <p>
        <label>Triangle vertical offset:</label>
        <input id="oy" type="number" step="0.1" value="-1">
    </p>
    <p>
        <label><input id="toggle" type="checkbox">Turn transform off</label>
    </p>
</div>
<div id="axes22"></div>

<div id="button">
    <div id="obj"></div>
    Button
</div>
    <p>
        <span id="matrix"></span>
    </p>

CSS

body {
    padding: 100px;
}
#controls {
    margin-bottom: 50px;
}
label {
    display: block;
}
#axes {
    border: 1px solid;
    border-right: none;
    border-bottom: none;
    width: 300px;
    height: 300px;
    position: absolute;
    left: 19px;
    top: 19px;
}
#button {
    display: inline-block;
    line-height: 14px;
    padding: 7px 10px 7px 5px;
    border: 1px solid #bbb;
    background-color: #eee;
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
    border-radius: 3px;
    box-shadow: inset 0 1px #fff, 0 1px rgba(255, 255, 255, 0.6);
    position: relative;
    zoom: 5;
}
#obj {
    position: absolute;
    top: 0;
    left: 0;
    background: aqua;
    border-radius: 2px;
    background: #eee -webkit-linear-gradient(-135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
    box-shadow: -1px -1px 0 #bbb, inset 0 1px #fff;
}

JavaScript

var transform = {
    obj: $('#obj')[0]
    
    , apply: function() {
        if ($('#toggle').prop('checked')) return
            
        var ow = parseFloat($('#ow').val())
        var tw = parseFloat($('#tw').val())
        var hm = parseFloat($('#hm').val())
        var bh = $('#button').outerHeight()
        var ox = parseFloat($('#ox').val())
        var oy = parseFloat($('#oy').val())
        var matrix = 'matrix('
            + (tw * hm / ow - tw / 2 / ow) + ', '
            + (-tw / 2 / ow) + ', '
            + (tw * hm / ow - tw / 2 / ow) + ', '
            + (tw / 2 / ow) + ', '
            + (-tw / 2 + bh / 2 - ow / 2 + ox) + ','
            + (bh / 2 - ow / 2  + oy) + ')'
        $('#matrix').text(matrix)
        this.obj.style.webkitTransform = matrix
     }
     
     , clear: function() {
        this.obj.style.webkitTransform = ''
     }
}
$('#ow').on('change', function() {
    var ow = $(this).val()
    $('#obj').width(ow).height(ow)
    transform.apply()
}).change()

$('#tw, #hm, #ox, #oy').on('change', function() {
    transform.apply() 
})
            
$('#toggle').on('change', function() {
    if ($(this).prop('checked'))
        transform.clear()
    else
        transform.apply()
})