# forms submit button syling **URL:** \ **Category:** Product Support\ **Created:** [June 7, 2018, 3:34am UTC](https://forum.mautic.org/t/forms-submit-button-syling/10565 "2018-06-07T03:34:49Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![radu.zlatianu](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/radu.zlatianu/32/181_2.png) [@radu.zlatianu](https://forum.mautic.org/u/radu.zlatianu)\ **Post date:** [June 7, 2018, 3:34am UTC](https://forum.mautic.org/t/forms-submit-button-syling/10565/1 "2018-06-07T03:34:49Z")
Hi! Anyone has insights on how to change the button? style, font, size, etc. using attributes? I’ve tried but failed… ---
**Author:** ![mike-accentdm](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/mike-accentdm/32/1178_2.png) [@mike-accentdm](https://forum.mautic.org/u/mike-accentdm)\ **Post date:** [June 27, 2018, 5:27pm UTC](https://forum.mautic.org/t/forms-submit-button-syling/10565/2 "2018-06-27T17:27:21Z")
You can add a CSS style statement to the input attributes, such as: `style="color: #fff;background-color:#ffa305;font-size: 15px;text-align: center;padding: 10px 28px;line-height: 1em;box-sizing: border-box;display: block;border-radius: 5px;box-shadow: none;"` ---
**Author:** ![raymondkent](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/raymondkent/32/412_2.png) [@raymondkent](https://forum.mautic.org/u/raymondkent)\ **Post date:** [August 2, 2018, 10:05pm UTC](https://forum.mautic.org/t/forms-submit-button-syling/10565/3 "2018-08-02T22:05:40Z")
heres an example that generates a green button, with white text in Verdana 20pt font. style="background-color: #3A23DB;border: none;color: #ffffff;font-family: Verdana;font-size: 20px;margin: 10px 0px 10px 0px;padding: 20px 20px 20px 20px;border-radius: 5px;text-align: center;width: 80%;text-decoration: none;display: inline-block; this code is **placed as a single line into the attributes** part of the submit button options If you break it down (after each “;” ) it makes more sense, but you paste it in as a single line as above. background-color: #3A23DB; (this is the button colour a green so replace with whatever hex code you are looking for) border: none; color: #ffffff; (this is the TEXT colour) font-family: Verdana; font-size: 20px; margin: 10px 0px 10px 0px; (spacing on the outside of the button) padding: 20px 20px 20px 20px; (spacing on the inside of the button around the text) border-radius: 5px; (no border would be 0px etc) text-align: center; width: 80%; (if you want the button to be the width of the form then change to 100%) text-decoration: none; display: inline-block; I hope this helps explains the CSS code for you. I also struggled with this for a while. Now I have saved the code in a text file and simply change the elements as needed and paste into the button attributes. ---
**Author:** ![chris0928](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/chris0928/32/118_2.png) [@chris0928](https://forum.mautic.org/u/chris0928)\ **Post date:** [August 3, 2018, 10:42am UTC](https://forum.mautic.org/t/forms-submit-button-syling/10565/4 "2018-08-03T10:42:23Z")
Hey Radu 🙂 What I’ve done for some clients is create a custom form style. Then rather than manually add code to every button, you can just select your custom theme for the form and re-use on any form. Take a look at a theme such as Oxygen, for example, and find the style.html.twig file in **html \> MauticFormBundle \> Builder**. You’ll see the form styles there. So you could simply copy that entire theme, change the name, and change the form styles, and you have a brand new form theme (including your button styles) to use whenever you’d like. **UPDATE:** [Here’s a video](https://innotiom.com/custom-mautic-form-styles/) I recorded on how to create a custom form style. ---
**Author:** ![dipon](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/dipon/32/1300_2.png) [@dipon](https://forum.mautic.org/u/dipon)\ **Post date:** [September 21, 2021, 3:14pm UTC](https://forum.mautic.org/t/forms-submit-button-syling/10565/5 "2021-09-21T15:14:51Z")
Hi, Could anybody please give me an Idea how or if I can change the size of a checkbox in a form? Would be a great help! Thanks in advance 🙂 ---
**Author:** ![diegoom](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/diegoom/32/9771_2.png) [@diegoom](https://forum.mautic.org/u/diegoom)\ **Post date:** [May 30, 2023, 8:58pm UTC](https://forum.mautic.org/t/forms-submit-button-syling/10565/6 "2023-05-30T20:58:22Z")
All this CSS text does not currently fit in the field. Could it be done in some other way?