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).

1 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 {
    border:1px solid #D0D0D0;
    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 {
    font-size: 32px;

/* 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 {

/* 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 {

/* 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 {
    color:#fff !important;}
  • 1
    Thanks for sharing this example! I'm not sure what steps you took to do the imagery but looks great. You can use the .extra templating system (civicrm.org/blog/dave-greenberg/…) and put this code at [your_custom_dir]/CRM/Contribute/Form/Contribution/Main.tpl to effect only contribution pages.
    – Andy Burns
    Commented Oct 18, 2019 at 3:48
  • Thanks for the tip on .extra - that's a new feature to me. Commented Oct 21, 2019 at 14:05
  • Thats amazing @PhilMoriceBrubaker. Thanks. is there a chance the "-" dash in front of the price can be removed via css?
    – Tapash
    Commented Mar 13, 2020 at 18:51
  • 1
    If the above css doesn't remove the dash separating the label and the amount, try adding this line: span.crm-price-amount-label-separator {display:none} Commented Mar 17, 2020 at 20:59
  • 2
    @Tapash you can remove it here github.com/civicrm/civicrm-core/blob/master/CRM/Price/BAO/…
    – Andy Burns
    Commented Apr 13, 2020 at 6:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.