How to sync css for all buttons

Hello @jmindl,

The easier alternative would be select the “No” option for the attribute: “Display submit button?” in the form’s settings, and if you are using the “CP Blocks” plugin to insert the buttons in the form, insert a new button but select the “submit” option as the button’s type. If you are using a button field in the form, enter as its onclick event the piece of code:

jQuery(this).closest('form').submit();

and that’s all.
Best regards.

Hello @codepeople

This works good. All buttons works, but I am still struggling with the reason of different design and padding of buttons even they have been selected the same.
https://www.vyzivne.com/wp-content/uploads/2018/07/buttons.png

style of button

<style>@import url(https://fonts.googleapis.com/css?family=Raleway:400);.btn201707130144{font-family:’Raleway’,Arial,sans-serif!important;border:none !important;background-color:#5666a5 !important;border-radius:5px !important;color:#ffffff !important;font-color:#000000 !important;cursor:pointer !important;padding:0px 30px !important;display:inline-block !important;text-transform:uppercase !important;line-height:46px !important;font-weight:400 !important;font-size:1em !important;outline:none !important;font-color:#000000 !important;position:relative !important;overflow:hidden !important;font-size:16px !important;border-radius:23px !important;letter-spacing:2px !important;-webkit-transform:translateZ(0) !important;-webkit-transition:all 0.35s ease !important;transition:all 0.35s ease !important;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;}.btn201707130144:before{opacity:0 !important;content:”” !important;position:absolute !important;top:0px !important;bottom:0px !important;left:0px !important;right:0px !important;border-radius:inherit !important;background-color:#ffffff !important;-webkit-transition:all 0.3s !important;transition:all 0.3s !important;-webkit-transform:translateY(100%) !important;transform:translateY(100%) !important;}.btn201707130144:after{position:absolute !important;top:0px !important;bottom:0px !important;left:0px !important;right:0px !important;border:5px solid #5666a5 !important;content:” !important;border-radius:inherit !important;}.btn201707130144:hover,.btn201707130144.hover{background-color:#5666a5 !important;color:#ffffff !important;}.btn201707130144:hover:before,.btn201707130144.hover:before{-webkit-transform:translateY(0%) !important;transform:translateY(0%) !important;opacity:0.25 !important;}</style>

I need to have 2nd and 3rd button the same s first and the same distance from each other

Thanks

Hello @jmindl,

First, you have assigned the class name: column4 to the third button, and the correct one in this case would column3

Second, I recommend you to assign to all these fields a custom class name, like: my-buttons (beside the column3 class)

Note that to assign multiple class names to a same field, you simply should separate them by a blank character in the “Add CSS Layout Keywords” in the fields attributes.

Finally, define the new style through the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png):

.my-buttons .dfield{text-align:center;}
.my-buttons .dfield button{width:95%;}

You are free to redefine completely the form’s appearance.

If you need additional modifications in the form’s styles, I can offer you a custom coding service from my private website:

https://cff.dwbooster.com/customization

Best regards.