# Turn Radio Buttons into actual buttons **URL:** \ **Category:** Get Help\ **Tags:** custom, radio-buttons, button, css\ **Created:** [May 29, 2021, 3:22pm UTC](https://community.gravityforms.com/t/turn-radio-buttons-into-actual-buttons/9517 "2021-05-29T15:22:41Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![Andre\_B](https://avatars.discourse-cdn.com/v4/letter/a/ecd19e/32.png) [@Andre\_B](https://community.gravityforms.com/u/Andre_B)\ **Post date:** [May 29, 2021, 3:22pm UTC](https://community.gravityforms.com/t/turn-radio-buttons-into-actual-buttons/9517/1 "2021-05-29T15:22:41Z")
Can anybody point me to a good, and recent source/tutorial on how to turn GF radio buttons field into nice looking buttons? Everything I’ve found so far either didn’t work anymore, or wasn’t up to more modern standards. Not sure if classes or hierarchies have changed in 2.5. ---
**Author:** ![Matt\_MX](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/matt_mx/32/3031_2.png) [@Matt\_MX](https://community.gravityforms.com/u/Matt_MX)\ **Post date:** [May 30, 2021, 1:51am UTC](https://community.gravityforms.com/t/turn-radio-buttons-into-actual-buttons/9517/2 "2021-05-30T01:51:53Z")
I followed [this advice](https://markheath.net/post/customize-radio-button-css) to make the buttons on my sitie [ScubaMedical.com](https://scubamedical.com) - These are standard radio buttons in GravityForms (with a bunch of CSS to change usability) ---
**Author:** ![user5c0166073a6c48.6](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/user5c0166073a6c48.6/32/17391_2.png) [@user5c0166073a6c48.6](https://community.gravityforms.com/u/user5c0166073a6c48.6)\ **Post date:** [May 30, 2021, 4:57am UTC](https://community.gravityforms.com/t/turn-radio-buttons-into-actual-buttons/9517/3 "2021-05-30T04:57:27Z")
This can be accomplished by using a ready class and CSS. Here are a few sources as to how you might accomplish this as well as a service provider who can convert radio buttons into actual buttons for you. 1.) [Source by typewheel](https://typewheel.xyz/present-radio-fields-checkboxes-buttons-gravity-forms/) This resource is provided by a Gravity Forms employee and is completely free. 2.) [Make radio buttons into actual buttons](https://www.fiverr.com/dmillersg77/style-your-gravity-forms) This is a service I offer, and I can add snippets for you and further customize the color and other various styling elements. 3.) Of course, here is another thread in which the same topic has been addressed before: [See previous topic from the community](https://community.gravityforms.com/t/re-css-radio-button-not-resizing-correctly-new/6732) ---
**Author:** ![Andre\_B](https://avatars.discourse-cdn.com/v4/letter/a/ecd19e/32.png) [@Andre\_B](https://community.gravityforms.com/u/Andre_B)\ **Post date:** [May 30, 2021, 1:42pm UTC](https://community.gravityforms.com/t/turn-radio-buttons-into-actual-buttons/9517/4 "2021-05-30T13:42:41Z")
Thank you very much. That helped a lot. ---
**Author:** ![MrPete](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/mrpete/32/2522_2.png) [@MrPete](https://community.gravityforms.com/u/MrPete)\ **Post date:** [June 3, 2021, 10:39pm UTC](https://community.gravityforms.com/t/turn-radio-buttons-into-actual-buttons/9517/5 "2021-06-03T22:39:42Z")
Unfortunately: #1 is outdated, working only on Legacy CSS rather than the new (Grid-based) 2.5 css. #3 link is not available. Is your #2 service up to date with GF 2.5 modern Grid CSS? ---
**Author:** ![user5c0166073a6c48.6](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/user5c0166073a6c48.6/32/17391_2.png) [@user5c0166073a6c48.6](https://community.gravityforms.com/u/user5c0166073a6c48.6)\ **Post date:** [June 3, 2021, 11:18pm UTC](https://community.gravityforms.com/t/turn-radio-buttons-into-actual-buttons/9517/6 "2021-06-03T23:18:43Z")
1. You will want to remove li out of your CSS selector for 2.5 compatibility. 2. Yes 3. Interesting the link is currently working on this end. ---
**Author:** ![MrPete](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/mrpete/32/2522_2.png) [@MrPete](https://community.gravityforms.com/u/MrPete)\ **Post date:** [June 3, 2021, 11:58pm UTC](https://community.gravityforms.com/t/turn-radio-buttons-into-actual-buttons/9517/7 "2021-06-03T23:58:09Z")
Not sure why #3 isn’t working for me… I just tested in three different browsers. In all cases I get “Oops! That page doesn’t exist or is private.” ---
**Author:** ![Matt\_MX](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/matt_mx/32/3031_2.png) [@Matt\_MX](https://community.gravityforms.com/u/Matt_MX)\ **Post date:** [June 4, 2021, 12:39pm UTC](https://community.gravityforms.com/t/turn-radio-buttons-into-actual-buttons/9517/8 "2021-06-04T12:39:48Z")
2.5 changed a lot of the code. But if you focus on understanding the concept that is being achieved all of the background info should help you figure out a way to style the buttons in the way you want. This is going to be the best way to solve achieve what you want - learning the concepts, rather than looking for drop-in code. The general concept here is to hide the system default radio button and instead transform the label element in to something you want. This is nothing GF specific, there are standard HTML elements. ---
**Author:** ![Rubiwane](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/rubiwane/32/3905_2.png) [@Rubiwane](https://community.gravityforms.com/u/Rubiwane)\ **Post date:** [November 1, 2021, 7:38pm UTC](https://community.gravityforms.com/t/turn-radio-buttons-into-actual-buttons/9517/9 "2021-11-01T19:38:46Z")
Hi to All I have a CSS code that works and i think it will help a lot more than than this: [How to Present Radio Fields & Checkboxes As Buttons in Gravity Forms](https://typewheel.xyz/present-radio-fields-checkboxes-buttons-gravity-forms/) Very difficult to find another reference on Google ! **Ok So let’s go :** ```auto .gform_wrapper ul.gfield_checkbox, .gform_wrapper ul.gfield_radio { margin: 0px 0 !important; } .gform_wrapper .gfield_required { display: none !important; } .gform_wrapper .gfield_radio li input[type=radio] { display: none; } /* Form */ .gform_wrapper ul.gfield_checkbox li label, .gform_wrapper ul.gfield_radio li label { text-align: center; display:inline-block; text-shadow: none; min-width: 150px; margin: 0 !important; padding: 15px 20px 5px 20px; border: 1px solid #4078A6; border-radius: 2px; color: black; height: 50px; } input:checked + label { background-color: #4078A6; color: #fff !important; box-shadow: none; } h4 { margin: 32px 0 50px 0; } .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) { border-color: #4078A6; background-color: white; } body .gform_wrapper .gform_body .gform_fields .gfield select { border: 1px solid #4078A6; height: 50px; } .gform_wrapper textarea.medium { border-color: #4078A6; } #gform_wrapper_2 .gform_fields .gfield input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: black !important; } #gform_wrapper_2 .gform_fields .gfield input::-moz-placeholder { /* Firefox 19+ */ color: black !important; } #gform_wrapper_2 .gform_fields .gfield input:-ms-input-placeholder { /* IE 10+ */ color: black !important; } #gform_wrapper_2 .gform_fields .gfield input:-moz-placeholder { /* Firefox 18- */ color: black !important; } ``` ---
**Author:** ![richardw8k](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/richardw8k/32/2354_2.png) [@richardw8k](https://community.gravityforms.com/u/richardw8k)\ **Post date:** [January 4, 2022, 4:57pm UTC](https://community.gravityforms.com/t/turn-radio-buttons-into-actual-buttons/9517/10 "2022-01-04T16:57:41Z")