COPH buttons

Buttons with icons, using jQuery UI, created for the College of Public Health at USF.

by mlms13

HTML

<button onclick="Generate_CV(this);" title="Generates MS Word file with information from your portfolio. Allows you to save this file to your computer.">Print Portfolio</button>

<button onclick="Generate_NIHBio(this);" title="Generates NIH Biosketch with information from your portfolio. Allows you to save this file to your computer.">NIH Biosketch Stub</button>

<button onclick="Generate_AR(this);" title="Generates MS Word file with the data from your portfolio for the specified time frame. Allows you to save this file to your computer.">Annual Report</button>

CSS

.ui-button {
    line-height: 1.4;
    position: relative;
}

.ui-button .ui-icon.ui-icon-msword {
    background-image: url('http://files.softicons.com/download/toolbar-icons/fugue-16px-icons-by-yusuke-kamiyamane/png/16x16/blue-document-word.png');
    height: 16px;
    width: 16px;
}
.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary {
       left: .5em;
}
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon {
       margin-top: -8px;
       position: absolute;
       top: 50%;
}
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text {
       padding: .4em 1em .4em 2.1em;
}

JavaScript

$('button').button({
    icons: {
        primary: 'ui-icon-msword'
    }
});