Introduction:
Using CSS allows you to customize the look and feel of your form. You can adjust the size, shape, color, and other properties to fit the specific needs of your form, making it more user-friendly and visually appealing.
Use Cases:
Meet accessibility guidelines. Ensure that buttons have sufficient contrast, are large enough to be easily clickable, and include focus styles for keyboard navigation.
Add hovering effects to alert your users that a button is clickable.
Adjust button sizes and styles for different screen sizes to ensure your form is easy to use on any device such as a mobile phone or tablet.
Submit button:
.Submit {
background-color: #0B9332;
color: black;
border-radius: 4px;
border: none;
box-shadow: rgba(0,0,0,0.19) 0 1px 0 0, rgba(0,0,0,0.253) 0 2px 3px 0, rgba(0,0,0,0.05) 0 1px 5px 0!important
}
.Submit: hover {
background-color: #134d0b;
}
Save Draft button:
.__SaveDraft {
background-color: #DC7633;
color: black;
border-radius: 4px;
border: none;
box-shadow: rgba(0,0,0,0.19) 0 1px 0 0, rgba(0,0,0,0.253) 0 2px 3px 0, rgba(0,0,0,0.05) 0 1px 5px 0!important
Approve Button
.Approve {
background-color: #339CFF;
color: white;
border-radius: 4px;
border: none;
box-shadow: rgba(0,0,0,0.19) 0 1px 0 0, rgba(0,0,0,0.253) 0 2px 3px 0, rgba(0,0,0,0.05) 0 1px 5px 0!important
}
Reject Button
.Reject {
background-color: #940e09;
color: white;
border-radius: 4px;
border: none;
box-shadow: rgba(0,0,0,0.19) 0 1px 0 0, rgba(0,0,0,0.253) 0 2px 3px 0, rgba(0,0,0,0.05) 0 1px 5px 0!important
}
Can't get enough of CSS power? Stay tuned for more codes to enhance your forms!