Styling Contribution pages with buttons

Question

Some users may want to display Price Set options as standard buttons rather than as radio buttons.

I am sharing my CSS for this below.

See how it looks here (Joomla).

Answer 1

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 <link rel="stylesheet" type="text/css" href="[path-to-civi-custom-css-directory]/civi-button-inputs.css"> 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;}