Buttons are actually surprisingly simple to create, they are just anchor links styled to look like a button. Have a look at our button styles and then try to re-create your own (don’t just copy-paste).
- setting the color to ‘inherit’ means that the browser won’t change the links to blue, they will just be whatever color is inherited (from a class, element, parent element etc)
- setting the line-height on all of the buttons means that even as you change the font-styles of each button, their height stays consistent.
- display: inline-block fixes the issues that come from display: inline (which links are by default) like vertical margin not working as expected.
- You should always have some kind of subtle hover effect to let people know that it is a button to be clicked, these are some of the different examples of hover effects.