Style Guide-Brand: Buttons

Buttons are used when an action needs to be taken for doing something, or actions where users affect the website's back-end or front-end. As action command controls, they are categorized as primary, secondary and disabled. Primary action is the most important action on the form or page such as "Submie" or "Save". The primary button is the focused default action button which is placed on the left side. Scondary action is less important, alternative action, which may have negative consequences when used accidentally. For example, hitting "Reset" erases all the data a user has entered. For some features, it needs user fulfilling some obligations to enable the button to execute the action. Without the condition statisfied, the button is disabled and unclikable

If the action on the site falls under the following categories:

Actions where users affect the website’s back-end or front-end
- When an action is associated with the element. Eg, Search, Submit, Cancel, Reset, Save, Add, Delete, Close, Install, Finish, etc.
- To collect information or make a choice from other window, popup or a layer.
- Elements such as Next, proceed, continue can be buttons when they are in a part of process in collecting information entered by the user. Eg: Filling up a form in 5 steps, making an online transaction.

Button Active	Button Disabled	Usage	Button Active Main Properties
		Primary: Apply to marketing and brand-related primary action using same red from SOLIDWORKS page on 3DS site.	background-color: #da291c hover background-color: #ea4f37 font-family: 3ds_regular-webfont color: #fff border: 0
		Secondary: Apply to marketing and brand-related secondary action using 3DS Corporate Steel Blue.	background-color: #005686 hover background-color: #368ec4 font-family: 3ds_regular-webfont color: #fff border: 0
		Form Button Primary: Apply to form primary action (e.g. Submit) using 3DS dark blue.	background-color: transparent hover-background-color: #368ec4 border: 1px solid #368ec4 font-family: 3ds_regular-webfont color: #368ec4 hover color: #fff disabled border: 1px solid #b6d4ed disabled color: #b6d4edd
		Form Button Secondary: Apply to form secondary action (e.g. Cancel) using 3DS dark gray.	background-color: transparent hoverbackground-color: #666 border: 1px solid #666 font-family: 3ds_regular-webfont color: #666 hover color: #fff disabled border: 1px solid #ccc disabled color: #ccc
		Apply to action related to information message using 3DS medium blue.	background-color: transparent hoverbackground-color: #42a2da border: 1px solid #42a2da font-family: 3ds_regular-webfont color: #42a2da hover color: #fff
		Apply to action related to medium attention using 3DS medium orange.	background-color: transparent hoverbackground-color: #e87b00 border: 1px solid #e87b00 font-family: 3ds_regular-webfont color: #f0ad4e hover color: #fff
		Apply to action related to high attention using 3DS midium red.	background-color: transparent hoverbackground-color: #ea4f37 border: 1px solid #ea4f37 font-family: 3ds_regular-webfont color: #ea4f37 hover color: #fff
		Apply to action related to successful task using 3DS medium green.	background-color: transparent hoverbackground-color: #57b847 border: 1px solid #57b847 font-family: 3ds_regular-webfont color: #337AB7 hover color: #fff

Size

Property to control the button size

To developers: Don't set button width to be fixed value (e.g. width: 120px), it will cause issue in localization after label text translated to other language, it may overflow if the string is longer.

Good: CSS Sample and Button Output

.btn-blue {
padding: 6px 12px;
}

Bad: CSS Sample and Button Output

.btn-blue {
width: 140px;
height: 35px;
}