Override Default Button Styles – CSS

It’s always a good idea to have your html semantics right especially for accessibility. One of the most common accessibility mistakes is to style a link to look like a button. Bootstrap is a great tool in order to get a project up and running without getting too many CSS rules in the way of your thinking, but sometimes it makes it too easy to mix up semantics:

<a href="#" class="btn btn-primary">

Although this would indeed look like a nicely styled button, this code could confuse screen reader users. Links are expected to be triggered by the Enter key, while buttons are expected to be triggered by the Space key. This can be altered with some javascript, but why not save a bunch of time and do it correctly in the first place?

Now, consider these examples:

<input type="submit"/>
<input type="button" value="Submit/>

When contained inside a form element, they should all provide the same functionality of submitting the form, but the last example allows content. For example, we can make an image act like a button:

   <img src="http://placeholder.image.com/image.jpg"/>

Sometimes we don’t want to have the boring default button style that can be inconsistent with the rest of our UI. Good thing we have CSS to style buttons:

button {
   background-color: transparent;
   border: none;
   color: "red";

Jason Velarde

Jason Velarde is the guy behind STEMcadia. He has been involved with libraries for over 15 years, starting as a Circulation Desk Clerk, working his way to becoming a Youth Services Librarian. Nowadays, he's spending countless hours in front of the computer as a web developer. Nearly every evening after work, you’ll find him either reverse engineering (breaking) a gadget, building prototype robots, or working on personal coding projects, but when he's not, he's here researching and writing about all things related to STEM on STEMcadia.