Answers.Body: <p>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.</p>
  
  <p>Add the following link tag <code>&lt;link rel="stylesheet" type="text/css" href="[path-to-civi-custom-css-directory]/civi-button-inputs.css"&gt;</code>
   to the source text anywhere on the page, such as</p>
  
  <ul>
  <li>the Contribution Page description (to deploy these styles only on that one Contribution Page) or</li>
  <li>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. </li>
  </ul>
  
  <pre><code>
  /* 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;}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-10-18T03:48:46.017Z
Answers.Text: 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 (https://civicrm.org/blog/dave-greenberg/now-its-easier-add-custom-behaviors-templates) and put this code at [your_custom_dir]/CRM/Contribute/Form/Contribution/Main.tpl to effect only contribution pages.
Answers.UserDisplayName: Andy Burns
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-10-21T14:05:49.897Z
Answers.Text: Thanks for the tip on .extra - that's a new feature to me.
Answers.UserDisplayName: Phil Morice Brubaker
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-03-13T18:51:10.637Z
Answers.Text: Thats amazing @PhilMoriceBrubaker. Thanks. is there a chance the "-" dash in front of the price can be removed via css?
Answers.UserDisplayName: Tapash
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-03-17T20:59:52.900Z
Answers.Text: 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}
Answers.UserDisplayName: Phil Morice Brubaker
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-03-19T15:49:11.460Z
Answers.Text: Thanks@PhilMoriceBrubaker but that didnt work.
Answers.UserDisplayName: Tapash
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-03-19T20:53:40.030Z
Answers.Text: Not sure I can help more without seeing the page itself. Feel free to send a message with the link (if you can't put it public).
Answers.UserDisplayName: Phil Morice Brubaker
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-03-25T14:20:15.190Z
Answers.Text: Looks like for those check boxes the " - " that separates the label from the amount is within the same <span> element as the amount, so you'd need to edit the Civi code that generates that part of the form. I can't help you there. Sorry.
Answers.UserDisplayName: Phil Morice Brubaker
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-04-13T06:38:46.290Z
Answers.Text: @Tapash you can remove it here https://github.com/civicrm/civicrm-core/blob/master/CRM/Price/BAO/PriceField.php#L583
Answers.UserDisplayName: Andy Burns
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-04-13T06:54:04.850Z
Answers.Text: Thanks @AndyBurns much appreciated!
Answers.UserDisplayName: Tapash
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-14T20:05:00.907Z
Answers.LastActivityDate: 2018-12-14T20:05:00.907Z
Answers.UserDisplayName: Phil Morice Brubaker
Body: <p>Some users may want to display Price Set options as standard buttons rather than as radio buttons.</p>
  
  <p>I am sharing my CSS for this below.</p>
  
  <p>See how it looks <a href="https://justhope.org/donate" rel="nofollow noreferrer">here</a> (Joomla).</p>
  
Tags: <contribution-page><css>
Title: Styling Contribution pages with buttons
ThreadText: # Styling Contribution pages with buttons
  
  (Asked by: username_0 on 2018-12-14)
  
  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](https://justhope.org/donate) (Joomla).
  
  **Tags:** contribution-page, css
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2018-12-14. Score: 6 | Accepted answer
  
  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;}
  
  ```
  
  > **Comments:**
  > **username_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 (https://civicrm.org/blog/dave-greenberg/now-its-easier-add-custom-behaviors-templates) and put this code at [your_custom_dir]/CRM/Contribute/Form/Contribution/Main.tpl to effect only contribution pages.  
  > **username_0**: Thanks for the tip on .extra - that's a new feature to me.  
  > **username_2**: Thats amazing @username_0. Thanks. is there a chance the "-" dash in front of the price can be removed via css?  
  > **username_0**: 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}  
  > **username_2**: Thanks@username_0 but that didnt work.  
  > **username_0**: Not sure I can help more without seeing the page itself. Feel free to send a message with the link (if you can't put it public).  
  > **username_0**: Looks like for those check boxes the " - " that separates the label from the amount is within the same <span> element as the amount, so you'd need to edit the Civi code that generates that part of the form. I can't help you there. Sorry.  
  > **username_1**: @username_2 you can remove it here https://github.com/civicrm/civicrm-core/blob/master/CRM/Price/BAO/PriceField.php#L583  
  > **username_2**: Thanks @username_1 much appreciated!  
  
  ---
  
  