Edit in JSFiddle

<div class="group">
	<button is="d-button" label="Default button" onclick="alert(this.label + ' clicked.');"></button>
	<button is="d-button" iconClass = 'd-icon-phone' label="Custom with icon" class="d-button-green" onclick="alert(this.label + ' clicked.');"></button>
</div>

require.config({
    baseUrl: "http://ibm-js.github.io/libraries/master"
});
require(["deliteful-build/layer"], function () {
    require([
        "deliteful/Button"
    ], function (){
        document.body.style.display = "";
    });
});

.group {
    margin: 20px;
    padding: 10px;
    border: 1px solid gray;
    border-radius: 6px;
}
.d-icon-phone:before {
    content: "\260E";
    padding-right: 4px;
    font-size: 120%;
}

.d-button-green {
    /* Default style */
    background-color: #47D147;
    color: white;
    border-color: #6FBF6F;
}

.d-button-green:focus, .d-button-green:hover {
    /* Style when the button is focused or hovered */
    background-color: #51F051;
    color: white;
    border-color: #4FE34F;
}

.d-button-green:active {
    /* Style when the button is pressed */
    background-color: #55FF55;
}