Title: Customizing Form Design CSS for Button only
Last modified: August 26, 2021

---

# Customizing Form Design CSS for Button only

 *  Resolved [finanzbeben](https://wordpress.org/support/users/finanzbeben/)
 * (@finanzbeben)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/customizing-form-design-css-for-button-only/)
 * Dear CFF Support,
 * I was able to change the corresponding field color for the button.
    However, 
   I fail to change the button’s color itself and its width. I also didn’t find 
   the corresponding CSS objects in your blog post on CSS custom styling for the
   button (only the field -> .cff-button-field). Could you help me?
 * Many thanks in advance.
 * Custom CSS so far:
 *     ```
       #fbuilder, #fbuilder label,
       #fbuilder span { color: #262626;}
       #fbuilder .cff-button-field{
         position: fixed;
         width:230px;
         padding: 250px;
         background: #FFF;
       	color: #FFF;
         right: 750px;
         top: 340px;
         z-index: 9999;
       }
       ```
   

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [finanzbeben](https://wordpress.org/support/users/finanzbeben/)
 * (@finanzbeben)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/customizing-form-design-css-for-button-only/#post-14808239)
 * One more thing: Is it also possible to align the button to the other fields coming
   from the templated 13 not using fixed positioning?
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/customizing-form-design-css-for-button-only/#post-14808304)
 * Hello [@finanzbeben](https://wordpress.org/support/users/finanzbeben/)
 * Please, note the fields include multiple components: the label, input box (input,
   textarea, or select tags), the instructions for users, etc. The class name `cff-
   button-field` is assigned to the field, but if you want to modify the appearance
   of the button (the input tag) the correct would be `#fbuilder .cff-button-field
   input`
 * In your CSS block of code, you are playing white color to the background and 
   text of the button. So, the text would be invisible.
 *     ```
       #fbuilder .cff-button-field input{
         background: #FFF !important;
         color: #333 !important;
       }
       ```
   
 * Note the use of the !important modifier in the CSS rules.
 * If you want to align the button with other fields, I recommend using the columns
   layouts. You can distribute the fields in columns by using container fields (
   Div or fieldset) or assigning the columns’ class names to the fields. Please,
   watch the following videos:
 * [https://wordpress.dwbooster.com/customdownloads/videos/video_columns_container.mp4](https://wordpress.dwbooster.com/customdownloads/videos/video_columns_container.mp4)
 * [https://wordpress.dwbooster.com/customdownloads/videos/video_columns_class.mp4](https://wordpress.dwbooster.com/customdownloads/videos/video_columns_class.mp4)
 * And read the following blog post:
 * [https://cff.dwbooster.com/blog/2019/01/06/columns](https://cff.dwbooster.com/blog/2019/01/06/columns)
 * Best regards.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Customizing Form Design CSS for Button only’ is closed to new replies.

 * ![](https://ps.w.org/calculated-fields-form/assets/icon-256x256.jpg?rev=1734377)
 * [Calculated Fields Form](https://wordpress.org/plugins/calculated-fields-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
 * [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)

## Tags

 * [css customization](https://wordpress.org/support/topic-tag/css-customization/)

 * 2 replies
 * 2 participants
 * Last reply from: [codepeople](https://wordpress.org/support/users/codepeople/)
 * Last activity: [4 years, 9 months ago](https://wordpress.org/support/topic/customizing-form-design-css-for-button-only/#post-14808304)
 * Status: resolved