Styling Contribution pages with buttons
These styles change Radio buttons and checkboxes in Civi Price Sets into colored toggle buttons. Make this a separate file from your primary civi-custom.css so that these styles can be applied to individual price sets, rather than globally: i.e. for donation pages, but not for event registrations.

Add the following link tag &lt;link rel="stylesheet" type="text/css" href="[path-to-civi-custom-css-directory]/civi-button-inputs.css"&gt;
 to the source text anywhere on the page, such as


the Contribution Page description (to deploy these styles only on that one Contribution Page) or
the Price Set (for all pages that use that price set). The Price Set Settings Pre-help is a sensible location for this, though if you don't have visible text in the pre-help section, there will be an empty div styled as your .help class). An alternate location in the Price Set is the pre-help for any field, which is less likely to have a visible empty div. 



/* lines up top of all new buttons */
#priceset.crm-section  div.content { 
    padding-top: 0px;}  

/* prevents various sections from overlapping or wrapping weirdly if the description includes
images or divs, not a bad candidate for basic Civi css */
#crm-container.crm-public .crm-section, .crm-section {
    display: flow-root;}

/* Styling the buttons */
.price-set-option-content input[type="radio"],
.price-set-option-content input[type="radio"] + label,
.price-set-option-content input[type="checkbox"],
.price-set-option-content input[type="checkbox"] + label {
    float:left;
    width:180px;
    margin:4px;
    background-color:#e9e1ef;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;      
    padding:13px 6px;}

/* Styling the labels */
.price-set-option-content label,
.price-set-option-content label span,
.price-set-option-content input[type="checkbox"] + label {
    text-align:center;
    font-size: 32px;
    display:block;}

/* make Total Amount same size as button text */
#crm-container.crm-public .calc-value { 
    font-size: 32px;}

/* Alternate text styles for the amounts, if both labels and amounts are shown for a field
(don't want everything to be large) */
.price-set-option-content input[type="radio"] + label .crm-price-amount-amount {
    font-size: 16px;}

/* puts the normal input controls out of sight */
.price-set-option-content input[type="radio"],
.price-set-option-content input[type="checkbox"],
span.crm-price-amount-label-separator {
    position:fixed;
    top:-50px;}

/* Style for hovered item */
.price-set-option-content input[type="radio"]:hover + label,
.price-set-option-content input[type="radio"]:hover + label .crm-price-amount-amount,
.price-set-option-content input[type="checkbox"]:hover + label {
    background-color:#eee6f4;}

/* Style for selected item */
.price-set-option-content input[type="radio"]:checked + label,
.price-set-option-content input[type="radio"]:checked + label .crm-price-amount-amount,
.price-set-option-content input[type="checkbox"]:checked + label {
    background-color:#663399;
    color:#fff !important;}