Buttons are used for calls to action on a webpage. They should be wrapped in an anchor tag with the appropriate classes applied. Each button should have the class .Btn applied. Button text should always be Title case, (no all caps or sentence case).
Standard and neutral buttons can be used when there are additional calls to action on a webpage. They should not compete with the main or primary call to action on the web page.
There should only be one CTA button on a webpage. This main call to action is a focal point on the page to get a user to take a specific action.
The ghost button should only be used in very rare instances where you have a primary and secondary button, but need a third that doesn't compete with the other calls to actions. A ghost button should only be used with a white or neutral background.
We have four different styles of buttons used across the website that are designated by class: .Btn, .Btn-cta, .Btn-neutral, and .Btn-ghost. Each button can be used in various layouts and designs, but there should only be ONE cta button on a web page. In addition to the main class for a button (.Btn), you also need to add a size class: .Btn-lg or .Btn-sm. Optionally, you can add the .Btn-full class if you need the button to span full width within it's container.
See the Pen Buttons by Wilmington University (@WilmU01) on CodePen.
.Btn = green standard button. Class should be added to all buttons..Btn-neutral = neutral standard button.Btn-cta = Call to action button.Btn-ghost = Ghost button.Btn-lg = Larger font and padding.Btn-sm = Smaller font and padding.Btn-full = CTA will span full width in the container