Formatting Buttons with CSS

Updated on

Beginning with Sonic Forms 3.0.1807A, you can now change up the look of your buttons using CSS classes.
By default, Sonic Forms buttons take the class TextButton. Here are three common CSS classes for buttons that are available in the Staff site template for iMIS 20.2:
 
  • TextButton (standard format, round corners, dark blue background)
  • SignInButton (plain format, full width)
  • SaveAndClose (orange background, compact format)
CSS allows you to combine different classes together (classes should be chosen to avoid conflicts) to create combinations of features. Here are five buttons that illustrate the classes noted above and how they change when they are combined:



and here is how these buttons are coded in Sonic Forms:

Example: Change a Button to a Hyperlink

The following CSS code, will create a CSS entry called "buttonLink" which can be applied to a Sonic Forms button to make it appear as a hyperlink. This CSS code should be added to the CSS used on your site template so that it is available throughout your site as needed.

.buttonLink {
   background:none!important;
    border:none;
    padding:0!important;
   
   /*optional*/
   font-family:arial,sans-serif; /*input has OS specific font-family*/
    color:#069;
    text-decoration:underline;
    cursor:pointer;
}


Working with CSS requires some programming skills and experience. If you need assistance, please contact your iMIS Solution Provider.