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 
   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 @PhilMoriceBrubaker. 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@PhilMoriceBrubaker 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 @AndyBurns much appreciated!  
  
  ---
  
  